效果如上图，共六个图像切换，形成小狗动态奔跑效果。完整代码和图片请从 https://files.cnblogs.com/files/xiandedanteng/runningDog.rar 下载。
代码：
<!DOCTYPE html><html lang="utf-8"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><head> ????<title>奔跑的狗</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"><!--function draw(){ ???var canvas=document.getElementById(‘myCanvus‘); ???????canvas.width=130; ???canvas.height=100; ???????var context=canvas.getContext(‘2d‘); ???var img=new Image(); ???img.src="runingDog.jpg"; ???????// 图块坐标 ???var 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‘} ??]; ???loop=setInterval(function(){ run(context,img,cds); }, 1000);};var index=130;var i=0;function run(context,img,cds){ ???context.clearRect(0,0,130,110);// 清除图案，注意这里写canvas.width，canvas.height页面会有残留,直接写数值比较好 ???????context.strokeStyle = "black"; ???// 地面 ???context.beginPath(); ???context.moveTo(0, 70); ???context.lineTo(context.width,70); ???context.stroke(); ???context.closePath(); ???????index++; ???if(index>108){ ???????index=0; ???} ???i=index % 6; ???????// 截取一块图贴上 ???context.drawImage(img,cds[i].x,cds[i].y,cds[i].width,cds[i].height,0,0,cds[i].width,cds[i].height); ???}//--></script>HTML5 Canvas 奔跑的小狗
原文地址：http://www.cnblogs.com/xiandedanteng/p/7482784.html