效果如上图，共六个图像切换，形成小狗动态奔跑效果。完整代码和图片请从 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>