Html5-Canvas示例
Html5下新增的一个重要标签<Canvas>可以让我们进行2D绘图。用js+Canvas做一个简单例子：绘制一个可以在页面上移动的人物——“艾斯蒂尔”。
前期准备
这里准备了一张8×8的人物图片，8个方向及8帧，图片是8×8的，在X轴上每一帧时向前走一步，而一帧大小为256×256；Y轴上是面向8个方向。
html标签
因为示例比较简单所以html里主要就包括了一个<canvas>标签，为了使用方便我还引用了google 上的 jsapi 来调用jquery.
代码
<
html
>
<
head
>
<
title
>
Canvas示例
</
title
>
<
script
type
="text/javascript"
src
="http://www.google.com/jsapi"
></
script
>
</
head
>
<
body
style
="width:100% ; height:100%"
>
<
canvas
id
="canvas"
width
="1500"
height
="800"
>
</
canvas
>
</
body
>
</
html
>
代码
<
html
>
<
head
>
<
title
>
Canvas示例
</
title
>
<
script
type
="text/javascript"
src
="http://www.google.com/jsapi"
></
script
>
</
head
>
<
body
style
="width:100% ; height:100%"
>
<
canvas
id
="canvas"
width
="1500"
height
="800"
>
</
canvas
>
</
body
>
</
html
>
JS代码
代码
<
script type
=
"
text/javascript
"
>
google.load(
"
jquery
"
,
"
1.3.2
"
);
google.setOnLoadCallback(
function
() { $(document).ready(pageLoad); });
var
canvas;
var
canvasCtx;
var
imgSpirit;
var
currentX;
var
currentY;
var
oTimer;
var
facing
=
4
;
var
isRunning
=
false
;
function
pageLoad() {
//
canvas = $("#canvas");
canvas
=
document.getElementById(
'
canvas
'
);
imgSpirit
=
new
Image();
imgSpirit.onload
=
function
() {
if
(canvas.getContext) {
canvasCtx
=
canvas.getContext(
'
2d
'
);
currentX
=
100
;
currentY
=
250
;
draw(
0
);
}
}
imgSpirit.src
=
"
spirit.png
"
;
$(
"
#canvas
"
).mousedown(onStart);
$(
"
#canvas
"
).mouseup(onStop);
$(
"
#canvas
"
).mousemove(onMove);
$(
"
#canvas
"
).css(
"
cursor
"
,
"
pointer
"
);
}
function
onStart(event) {
if
(event.button
==
0
) {
targetX
=
event.pageX;
targetY
=
event.pageY;
isRunning
=
true
;
onRunning();
}
}
function
onStop() {
isRunning
=
false
;
clearInterval(oTimer);
}
function
onMove(event) {
if
(isRunning) {
difX
=
event.pageX
-
targetX;
difY
=
event.pageY
-
targetY;
setFacing();
pathX.push(difX);
pathY.push(difY);
targetX
=
event.pageX;
targetY
=
event.pageY;
}
}
function
onRunning() {
var
i
=
0
;
oTimer
=
setInterval(
function
() {
i
=
i
%
8
;
draw(i);
i
++
;
},
84
);
}
function
setFacing() {
}
function
draw(frame) {
if
((currentX
+
256
)
>=
1500
) {
currentX
=
1500
-
256
;
}
if
(currentX
<=
0
) {
currentX
=
0
;
}
if
(currentY
<=
0
) {
currentY
=
0
;
}
if
((currentY
+
256
)
>=
800
) {
currentY
=
800
-
256
;
}
canvasCtx.clearRect(currentX, currentY,
256
,
256
);
canvasCtx.drawImage(imgSpirit, frame
*
256
, facing
*
256
,
256
,
256
, currentX, currentY,
256
,
256
);
}
<
/
script>
首先获取通过ID 获取 canvas 对象（这里不知道为什么使用jquery无法获取），然后重新创建一个图片对象，并在图片加载时绘制canvas。为Canvas绑定鼠标按下、释放和移动的事件处理。在鼠标按下时开始移动，释放时停止。
因为是简单的示例没有做任何复杂的算法处理，所以人物行走起来有点奇怪。
代码运行结果（在chrome 8）
全部代码
代码
<
html
>
<
head
>
<
title
>
Canvas示例
<
/
title>
<
script type
=
"
text/javascript
"
src
=
"
http://www.google.com/jsapi
"
><
/
script>
<
script type
=
"
text/javascript
"
>
google.load(
"
jquery
"
,
"
1.3.2
"
);
google.setOnLoadCallback(
function
() { $(document).ready(pageLoad); });
var
canvas;
var
canvasCtx;
var
imgSpirit;
var
currentX;
var
currentY;
var
targetX;
var
targetY;
var
difX;
var
difY;
var
oTimer;
var
facing
=
4
;
var
isRunning
=
false
;
var
pathX
=
[];
var
pathY
=
[];
function
pageLoad() {
//
canvas = $("#canvas");
canvas
=
document.getElementById(
'
canvas
'
);
imgSpirit
=
new
Image();
imgSpirit.onload
=
function
() {
if
(canvas.getContext) {
canvasCtx
=
canvas.getContext(
'
2d
'
);
currentX
=
100
;
currentY
=
250
;
draw(
0
);
}
}
imgSpirit.src
=
"
spirit.png
"
;
$(
"
#canvas
"
).mousedown(onStart);
$(
"
#canvas
"
).mouseup(onStop);
$(
"
#canvas
"
).mousemove(onMove);
$(
"
#canvas
"
).css(
"
cursor
"
,
"
pointer
"
);
}
function
onStart(event) {
if
(event.button
==
0
) {
targetX
=
event.pageX;
targetY
=
event.pageY;
isRunning
=
true
;
onRunning();
}
}
function
onStop() {
isRunning
=
false
;
clearInterval(oTimer);
}
function
onMove(event) {
if
(isRunning) {
difX
=
event.pageX
-
targetX;
difY
=
event.pageY
-
targetY;
setFacing();
pathX.push(difX);
pathY.push(difY);
targetX
=
event.pageX;
targetY
=
event.pageY;
}
}
function
onRunning() {
var
i
=
0
;
oTimer
=
setInterval(
function
() {
i
=
i
%
8
;
setNext();
draw(i);
i
++
;
},
84
);
}
function
setFacing() {
var
y
=
-
(targetY
-
(currentY
+
128
+
60
))
var
x
=
targetX
-
(currentX
+
128
);
var
v
=
y
/
x;
var
t
=
Math.atan(v);
var
r
=
Math.PI
/
8
;
if
(y
>
0
&&
x
>
0
) {
if
(t
>=
0
&&
t
<=
r) {
facing
=
4
;
}
if
(t
>
r
&&
t
<
3
*
r) {
facing
=
3
;
}
if
(t
>
3
*
r) {
facing
=
2
}
}
if
(y
>
0
&&
x
<
0
) {
if
((
-
t)
>
3
*
r) {
facing
=
2
;
}
if
(
-
t
>
r
&&
-
t
<
3
*
r) {
facing
=
1
;
}
if
(
-
t
>=
0
&&
-
t
<=
r) {
facing
=
0
;
}
}
if
(y
<
0
&&
x
<
0
) {
if
(t
>=
0
&&
t
<=
r) {
facing
=
0
;
}
if
(t
>
r
&&
t
<
3
*
r) {
facing
=
7
;
}
if
(t
>
3
*
r) {
facing
=
6
}
}
if
(y
<
0
&&
x
>
0
) {
if
((
-
t)
>
3
*
r) {
facing
=
6
;
}
if
(
-
t
>
r
&&
-
t
<
3
*
r) {
facing
=
5
;
}
if
(
-
t
>=
0
&&
-
t
<=
r) {
facing
=
4
;
}
}
}
function
draw(frame) {
if
((currentX
+
256
)
>=
1500
) {
currentX
=
1500
-
256
;
}
if
(currentX
<=
0
) {
currentX
=
0
;
}
if
(currentY
<=
0
) {
currentY
=
0
;
}
if
((currentY
+
256
)
>=
800
) {
currentY
=
800
-
256
;
}
canvasCtx.clearRect(currentX, currentY,
256
,
256
);
canvasCtx.drawImage(imgSpirit, frame
*
256
, facing
*
256
,
256
,
256
, currentX, currentY,
256
,
256
);
}
function
setNext() {
if
((currentX
+
128
)
>
targetX) {
if
(((currentX
+
128
)
-
targetX)
>
8
) {
currentX
=
currentX
-
8
;
}
}
if
(currentX
<
targetX) {
if
(targetX
-
currentX ) {
currentX
=
currentX
+
8
;
}
}
if
((currentY
+
128
+
60
)
>
targetY) {
if
(((currentY
+
128
+
60
)
-
targetY)
>
8
) {
currentY
=
currentY
-
6
;
}
}
if
((currentY
+
128
+
60
)
<
targetY) {
if
((targetY
-
(currentY
+
128
+
60
))
>
8
) {
currentY
=
currentY
+
6
;
}
}
}
<
/
script>
<
/
head>
<
body style
=
"
width:100% ; height:100%
"
>
<
canvas id
=
"
canvas
"
width
=
"
1500
"
height
=
"
800
"
>
<
/
canvas>
<
/
body>
<
/
html>