下载地址：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分