欲看效果请下载后用Chrome浏览器打开index.html观看，下载地址：https://files.cnblogs.com/files/xiandedanteng/51-NewRunningDog.rar
代码：
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<title>奔跑的狗 19.3.3 12:09</title>
</head>
<body onload="draw()">
<canvas id="myCanvus" width="130px" height="100px" 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=130;
canvas.height=100;
ctx=canvas.getContext('2d');
img=new Image();
img.src="runingDog.jpg";
// 图块坐标
cds=[
{'x':'50','y':'30','width':'130','height':'70'},
{'x':'190','y':'30','width':'130','height':'70'},
{'x':'320','y':'30','width':'130','height':'70'},
{'x':'60','y':'110','width':'130','height':'70'},
{'x':'190','y':'110','width':'130','height':'70'},
{'x':'310','y':'110','width':'130','height':'70'}
];
animate();
};
var index=130;
var i=0;
function animate(){
ctx.clearRect(0,0,130,110);// 清除图案
ctx.strokeStyle = "black";
// 绘制地面
ctx.beginPath();
ctx.moveTo(0, 70);
ctx.lineTo(ctx.width,70);
ctx.stroke();
ctx.closePath();
index++;
if(index>108){
index=0;
}
i=index % 6;
// 截取一块图贴上
ctx.drawImage(img,cds[i].x,cds[i].y,cds[i].width,cds[i].height,0,0,cds[i].width,cds[i].height);
setTimeout( function(){
window.requestAnimationFrame(animate); /// 让浏览器自行决定帧速率
}, 0.35 * 1000 );// 延时350毫秒执行
}
//-->
</script>