[Canvas]走近的女孩

动态效果请点此下载文件并使用Chrome或者FireFox浏览器观看。
图例：
[Canvas]走近的女孩-LMLPHP
代码：
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>走进的女孩 19.3.3 15:47 horn19782016@163.com</title>
    </head>

     <body onload="draw()">
        <canvas id="myCanvus" width="192px" height="192px" 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=192;
    canvas.height=192;

    ctx=canvas.getContext('2d');

    // 图块坐标
    cds=[
        {'pos':'pic/1.gif','x':'0', 'y':'0','width':'192','height':'192'},
        {'pos':'pic/2.gif','x':'0', 'y':'0','width':'192','height':'192'},
        {'pos':'pic/3.gif','x':'0', 'y':'0','width':'192','height':'192'},
        {'pos':'pic/4.gif','x':'0', 'y':'0','width':'192','height':'192'},
        {'pos':'pic/5.gif','x':'0', 'y':'0','width':'192','height':'192'},
        {'pos':'pic/6.gif','x':'0', 'y':'0','width':'192','height':'192'},
        {'pos':'pic/7.gif','x':'0', 'y':'0','width':'192','height':'192'},
        {'pos':'pic/8.gif','x':'0', 'y':'0','width':'192','height':'192'},
        {'pos':'pic/9.gif','x':'0', 'y':'0','width':'192','height':'192'},
        {'pos':'pic/10.gif','x':'0', 'y':'0','width':'192','height':'192'},
        {'pos':'pic/11.gif','x':'0', 'y':'0','width':'192','height':'192'},
        {'pos':'pic/12.gif','x':'0', 'y':'0','width':'192','height':'192'},
   ];

    animate();
};

var index=0;
var i=0;

function animate(){
    index++;
    if(index>108){
        index=0;
    }
    i=index % 12;

    img=new Image();
    img.src=cds[i].pos;

    // 截取一块图贴上
    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.10 * 1000 );// 延时执行
}

//-->
</script>
2019年3月3日16点22分