html5当道.到处都是关于html5的新闻和报道.感觉自己还不去了解下html5就真的快敢不上时代的步伐了
所以今天星期六.放假休息在家.没事看了下网上的相关博客.还有一些试例.
只不过看归看.不自己动手还是像在喝鸡汤--不经过大脑的.
html5新加了很多标记和相关的功能.
什么Web Sql DataBase,Web Storage,Web Socket等相关功能
还有一些新标记:Canvas,声音,视频等.......
今天我主要也就看了下Canvas标记,所以自己也来写写Demo.
由于才开始学习.所以问题也会有很多.希望大家手下留情.
主要学习还是看了下mozilla发布的一个Canvas:https://developer.mozilla.org/cn/Canvas_tutorial
自己就做了一个小试例.只不过在Canvas标记中还只主要用到一个方法.其它很牛的方法也慢慢学习之中
下面的例子是我用Canvas的drawImage方法做的一个图片切换效果
演示地址1: http://liuju150.cacacoo.com/ImageSwitchUp.htm
演示地址2:http://liuju150.cacacoo.com/ImageSwitch.htm
Web Sql DataBase示例:http://liuju150.cacacoo.com/WebSql.htm
上代码:
View Code
DOCTYPE html
>
<
html
>
<
head
>
<
title
>
title
>
<
script
type
="text/javascript"
>
var
_LoadImage
=
[];
//
/加载完成的Image对像数组
var
_NextImageIndex
=
0
;
//
/下次要显示的图片在_LoadImage的索引位置
function
LoadImageURL(ImageCount) {
//
/初始化的时候要得到所有图片的地址
//
/图片的个数
var
_InitImageURL
=
[];
for
(
var
i
=
0
; i
<
parseInt(ImageCount); i
++
) {
var
_url
=
"
Image/
"
+
(i
+
1
).toString()
+
"
.jpg
"
;
_InitImageURL.push(_url);
}
LoadImage(_InitImageURL);
}
function
LoadImage(ImageURL) {
//
/用图片地址初始化Image对像
//
/图片的地址数组
while
(ImageURL.length
!=
0
) {
var
img
=
new
Image();
img.src
=
ImageURL.pop();
img.onload
=
function
() {
_LoadImage.push(
this
);
PushMsg(
"
Push _LoadImage:
"
+
this
.src);
if
(_LoadImage.length
==
11
) {
ImageSwitch.Images
=
_LoadImage;
ImageSwitch.Canvas
=
document.getElementById(
"
CanvasSwitch
"
);
ImageSwitch.Show();
}
}
}
}
function
PushMsg(message) {
//
/日志输出
//
/日志内容
var
_span
=
document.createElement(
"
span
"
);
_span.innerText
=
message;
var
msg
=
document.getElementById(
"
msg
"
);
msg.appendChild(_span);
var
_br
=
document.createElement(
"
br
"
);
msg.appendChild(_br);
}
window.onload
=
function
() {
LoadImageURL(
11
);
}
var
ImageSwitch
=
new
Object();
ImageSwitch.WidthCount
=
11
;
//
在X坐标上分成几等份
ImageSwitch.HeightCount
=
8
;
//
在Y坐标上分成几等份
ImageSwitch.Canvas
=
new
Object();
//
Canvas标记对象
ImageSwitch.Images
=
[];
//
要显示的图片对象
ImageSwitch.NextImageIndex
=
0
;
//
下个要显示的图片对象在Images中的索引位置
ImageSwitch.SwitchTime
=
1000
;
//
图片切换效果用时(1S=10000)
ImageSwitch.ShowTime
=
2000
;
//
一个图片坐切换开始到切换另一个图片所用的时间
ImageSwitch.isHeightType
=
true
;
//
true:以垂直方向显示,false:以水平方向显示
ImageSwitch.Current
=
new
Object();
ImageSwitch.Show
=
function
() {
if
(
!
this
.Canvas.getContext) {
return
;
}
ImageSwitch.Current.CurWidth
=
0
;
ImageSwitch.Current.CurHeight
=
0
;
this
.Canvas.getContext(
"
2d
"
).drawImage(
this
.Images[
this
.NextImageIndex],
0
,
0
);
this
.NextImageIndex
=
(
this
.NextImageIndex
+
1
)
%
this
.Images.length;
this
.DrawImage();
}
ImageSwitch.DrawImage
=
function
() {
var
_ctx
=
this
.Canvas.getContext(
"
2d
"
);
var
_imageSW
=
this
.Canvas.width
/
this
.WidthCount;
var
_imageSH
=
this
.Canvas.height
/
this
.HeightCount;
var
_imageSX
=
_imageSW
*
this
.Current.CurWidth;
var
_imageSY
=
_imageSH
*
this
.Current.CurHeight;
_ctx.drawImage(
this
.Images[
this
.NextImageIndex], _imageSX, _imageSY, _imageSW, _imageSH, _imageSX, _imageSY, _imageSW, _imageSH);
if
(
this
.isHeightType) {
this
.Current.CurHeight
=
(
this
.Current.CurHeight
+
1
)
%
this
.HeightCount;
if
(
this
.Current.CurHeight
==
0
) {
this
.Current.CurWidth
=
(
this
.Current.CurWidth
+
1
)
%
this
.WidthCount;
}
}
else
{
this
.Current.CurWidth
=
(
this
.Current.CurWidth
+
1
)
%
this
.WidthCount;
if
(
this
.Current.CurWidth
==
0
) {
this
.Current.CurHeight
=
(
this
.Current.CurHeight
+
1
)
%
this
.HeightCount;
}
}
if
(
this
.Current.CurWidth
==
0
&&
this
.Current.CurHeight
==
0
) {
this
.NextImageIndex
=
(
this
.NextImageIndex
+
1
)
%
this
.Images.length;
setTimeout(
function
() { ImageSwitch.DrawImage(); },
this
.ShowTime
-
(
this
.SwitchTime
/
(
this
.WidthCount
*
this
.HeightCount)));
}
else
{
setTimeout(
function
() { ImageSwitch.DrawImage(); },
this
.SwitchTime
/
(
this
.WidthCount
*
this
.HeightCount));
}
}
function
ChangeType() {
ImageSwitch.isHeightType
=
!
ImageSwitch.isHeightType;
}
script
>
head
>
<
body
>
<
div
>
<
canvas
id
="CanvasSwitch"
width
="275"
height
="200"
>
canvas
>
div
>
<
div
><
input
type
="button"
value
="切换显示方式(水平/垂直)"
onclick
="ChangeType()"
/>
div
>
<
div
id
="msg"
>
div
>
body
>
html
>
下面是有关Web Sql DataBase的代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>