用canvas實現朝四個方向行走的小人，也可是使用鍵盤方向鍵操作行走的方向，其實就是用canvas不停的清除重畫
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
canvas {
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="cas" width="300" height="300">
您的瀏覽器不支持canvas，請升級到最新的瀏覽器
</canvas>
<input type="button" id="up" value="上"/>
<input type="button" id="down" value="下"/>
<input type="button" id="left" value="左"/>
<input type="button" id="right" value="右"/>
<script>
var cas = document.getElementById("cas");
var ctx = cas.getContext("2d");
var img = new Image();
img.src = "imgs/soldiers.png";
var w = img.width / 4,
h = img.height / 4;
var i = 0; //切換圖片的標誌
var flag = 0; //方向的標誌
img.onload = function () {
setInterval(function () {
//清除
ctx.clearRect(0, 0, cas.width, cas.height);
//將圖片畫入canvas中
/*
* 第一個參數是圖片的對象
* 第二個和第三個參數是 圖片左上角的x,y座標點
* 第四個和第五個參數是 圖片的寬 高
* 第六個和第七個參數是 顯示在畫布上的x,y座標點
* 第八和第九個參數 顯示在畫布上的寬高
* */
ctx.drawImage(img, w * i, h * flag, w, h, 100, 100, w, h);
i++;
i = i % 4;//循環，這樣纔是一個循環走動的過程
}, 150);
}
//向後走
document.getElementById("up").onclick = function () {
flag = 3;
}
//向前走
document.getElementById("down").onclick = function () {
flag = 0;
}
//向左走
document.getElementById("left").onclick = function () {
flag = 1;
}
//向右走
document.getElementById("right").onclick = function () {
flag = 2;
}
//*************按方向鍵，讓人物轉變方向 左-37 上-38 右-39 下-40 *******************
document.onkeyup = function (e) {
switch (e.keyCode) {
case 37:
flag = 1;
break;
case 38:
flag = 3;
break;
case 39:
flag = 2;
break;
case 40:
flag = 0;
break;
}
}
</script>
</body>
</html>
