下载地址：https://files.cnblogs.com/files/xiandedanteng/52-WalkingHorse.rar，请用Chrome浏览器打开观看动态效果。
图例：
源码：
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<title>行走的马 19.3.3 14:41 horn19782016@163.com</title>
</head>
<body onload="draw()">
<canvas id="myCanvus" width="1200px" height="90px" style="border:1px dashed black;">
出现文字表示你的浏览器不支持HTML5
</canvas>
</body>
</html>
<script type="text/javascript">
<!--
var ctx;// 绘图环境
var cds;// 从大图中取小图的坐标数组
var img;// 大图
function draw(){
var canvas=document.getElementById('myCanvus');
canvas.width=1200;
canvas.height=90;
ctx=canvas.getContext('2d');
img=new Image();
img.src="runningHorse.jpg";
// 图块坐标
cds=[
{'x':'0', 'y':'10','width':'120','height':'80'},
{'x':'120','y':'10','width':'120','height':'80'},
{'x':'240','y':'10','width':'120','height':'80'},
{'x':'360','y':'10','width':'120','height':'80'},
{'x':'480','y':'10','width':'120','height':'80'},
{'x':'0', 'y':'100','width':'120','height':'80'},
{'x':'120','y':'100','width':'120','height':'80'},
{'x':'240','y':'100','width':'120','height':'80'},
{'x':'360','y':'100','width':'120','height':'80'},
{'x':'490','y':'100','width':'120','height':'80'},
];
animate();
};
var index=0;
var i=0;
function animate(){
ctx.clearRect(0,0,1200,90);
ctx.fillStyle = "rgb(137,201,3)";
ctx.fillRect(0, 0, 1200, 90);
ctx.strokeStyle = "black";
// 绘制地面
ctx.lineWidth = 0.5;
ctx.beginPath();
ctx.fillStyle = "black";
ctx.moveTo(0, 80.5);
ctx.lineTo(1200,80.5);
ctx.stroke();
ctx.closePath();
index+=15;
if(index>1320){
index=-120;
}
i=Math.abs((index/15)) % 10;
// 截取一块图贴上
ctx.drawImage(img,cds[i].x,cds[i].y,cds[i].width,cds[i].height,index,0,cds[i].width,cds[i].height);
setTimeout( function(){
window.requestAnimationFrame(animate); /// 让浏览器自行决定帧速率
}, 0.15 * 1000 );// 延时执行
}
//-->
</script>
2019年3月3日15点04分