本作比前作增加了控制功能，观看动态效果请点此下载代码用Chrome或Firfox浏览器观看。
图例：
代码：
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>越来越近的女孩 19.3.3 18:11 by:逆火 horn19782016@163.com</title> <style> #canvas{ background:#ffffff; cursor:pointer; margin-left:10px; margin-top:10px; -webkit-box-shadow:3px 3px 6px rgba(0,0,0,0.5); -moz-box-shadow:3px 3px 6px rgba(0,0,0,0.5); box-shadow:3px 3px 6px rgba(0,0,0,0.5); } #controls{ margin-top:10px; margin-left:15px; } </style> </head> <body onload="init()"> <div id="controls"> <input id='animateBtn' type='button' value='行动'/> </div> <canvas id="canvas" width="192px" height="192px" > 出现文字表示你的浏览器不支持HTML5 </canvas> </body> </html> <script type="text/javascript"> <!-- var paused=true; animateBtn.onclick=function(e){ paused=! paused; if(paused){ animateBtn.value="行动"; }else{ animateBtn.value="暂停"; window.requestAnimationFrame(animate); } } var ctx;// 绘图环境 var cds;// 坐标数组 function init(){ var canvas=document.getElementById('canvas'); 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'}, ]; }; var index=0; var i=0; function animate(){ if(!paused){ 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>