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="100% ; height:100%">
<canvas id="canvas" width="1500" height="800">
</canvas>
</body>
</html>
JS代码
代码
<html>
<head>
<title>Canvas示例</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
</head>
<body style="100% ; height:100%">
<canvas id="canvas" width="1500" height="800">
</canvas>
</body>
</html>
代码
<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>
因为是简单的示例没有做任何复杂的算法处理，所以人物行走起来有点奇怪。
代码运行结果（在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="100% ; height:100%">
<canvas id="canvas" width="1500" height="800">
</canvas>
</body>
</html>