[Canvas]奔跑的马

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