用canvas实现朝四个方向行走的小人，也可是使用键盘方向键操作行走的方向，其实就是用canvas不停的清除重画
canvas {
border: 1px solid red;
}
您的浏览器不支持canvas，请升级到最新的浏览器
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;
}
}
demo下载地址：demo连接地址
