代码中用的图片：大小200*260
方法一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>序列帧动画</title>
</head>
<body>
<div id="container">
<canvas id="cavsImage">
您的浏览器不支持canvas,请升级浏览器
</canvas>
<button id="btnUp">↑</button>
<button id="btnDown">↓</button>
<button id="btnLeft">←</button>
<button id="btnRight">→</button>
</div>
<script>
(function(){
var canvas = document.querySelector('#cavsImage');
var ctx = canvas.getContext('2d');
canvas.width = 600;
canvas.height = 600;
canvas.style.border = '1px solid #ccc';
var image = new Image();
image.src='images/soldier.png';
image.onload = function() {
var frameIndex = 0;
var direction = 0;
setInterval(function () {
//清除之前的图片墨迹
ctx.clearRect(0,0,canvas.width,canvas.height);
// 裁剪图片
ctx.drawImage(image,50*frameIndex,65*direction,50,65,100,100,50*2,65*2);
frameIndex++;
frameIndex %=4; //取余，重复0-3这四幅图像
},100); // 1帧图像/100s
var btnUp = document.getElementById('btnUp');
btnUp.onclick = function () {
direction = 3;
};
var btnDown = document.getElementById('btnDown');
btnDown.onclick = function () {
direction = 0;
};
var btnLeft = document.getElementById('btnLeft');
btnLeft.onclick = function () {
direction = 1;
};
var btnRight = document.getElementById('btnRight');
btnRight.onclick = function () {
direction = 2;
};
};
})();
</script>
</body>
</html><!DOCTYPE html>
<
