利用canvas绘制序列帧动画 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8 <div id="container">
 9     <canvas id="cavsElem">
10         你的浏览器不支持canvas，请升级浏览器
11     </canvas>
12     <button id="btn-dir-left">向左</button>
13     <button id="btn-dir-right">向右</button>
14     <button id="btn-dir-up">向后</button>
15     <button id="btn-dir-down">向前</button>
16 </div>
17 <script>
18     (function(){
19         var canvas = document.querySelector( '#cavsElem' );
20         var ctx = canvas.getContext( '2d' );
21         canvas.width = 200;
22         canvas.height = 200;
23         canvas.style.border = "1px solid #000";
24         var dirIndex=0;//设置方向的索引
25         //加载图片
26         var img=new Image();
27         img.src='gameImgs/DMMban.png';
28         //绘制精灵图片
29         img.onload=function(){
30             var frameIndex=0;
31             setInterval(function(){
32                 //清除 之前的 图片墨迹的第一种方法：。
33                 ctx.clearRect(0,0,canvas.width,canvas.height);
34 //                第二种方法：canvas.width=canvas.width
35                 ctx.drawImage(
36                         img
37                         ,frameIndex*45//截取原始图片的 x坐标
38                         ,dirIndex*65//截取原始图片的 y坐标
39                         ,40//截取原始图片的 宽度
40                         ,65 // 截取的高度
41                         ,200//图片在canvas画布上的x坐标
42                         ,200//图片在canvas画布上的y坐标
43                         ,80//绘制图片的宽度
44                         ,130//绘制图片的高度
45                 );
46                 frameIndex++;
47                 frameIndex%=4;//要求frameIndex的值小于等于四
48             },1000/10)
49         }
50     }());
51 </script>
52 </body>
53 </html>

 

posted @ 2017-11-27 15:22  前端极客  阅读(4937)  评论(1)  编辑  收藏  举报