利用对象思想来绘制canvas帧动画

绘制思路：

1.封装一个对象出来：

2.属性： width . height imgSr speed dir
3.行为： render changeDir

html文件：

 1 <script>
 2     (function(){
 3         var canvas = document.querySelector( '#cavsElem' );
 4         var ctx = canvas.getContext( '2d' );
 5         canvas.width = 600;
 6         canvas.height = 600;
 7         canvas.style.border = "1px solid #000";
 8         var s=new Sprite({
 9             x:300,//在画布上的坐标
10             y:300,
11             w:80,//画布上的宽高
12             h:130,
13             fps:4,//速度
14             originW:40,//截取的精灵图片中的精灵的宽高。
15             originH:65,
16             imgSrc:'gameImgs/DMMban.png'
17         });
18         s.render(ctx);
19         var btnLeft = document.getElementById('btn-dir-left');
20         btnLeft.onclick = function() {
21             s.changeDir('right');
22         };
23         var btnRight = document.getElementById('btn-dir-right');
24         btnRight.onclick = function() {
25             s.changeDir('right');
26         };
27         var btnUp = document.getElementById("btn-dir-up");
28         btnUp.onclick = function() {
29             s.changeDir('up');
30         };
31         var btnDown = document.getElementById('btn-dir-down');
32         btnDown.onclick = function() {
33             s.changeDir('down');
34         };
35         }());
36 </script>

js文件：

 1 <script>
 2     function Sprite( option ) {
 3         //构造函数执行的时候，立即调用初始化的函数
 4         this._init( option );
 5     }
 6     Sprite.prototype = {
 7         //初始化
 8         _init: function( option ) {
 9             this.x = option.x === 0 ? 0 : (option.x || 10);//在画布上的坐标
10             this.y = option.y === 0 ? 0 : (option.y || 10);//
11             this.w = option.w || 40; // 绘制到canvas上的宽高
12             this.h = option.h || 65;
13             this.fps =  option.fps || 10; // frame per second
14             this.originW = option.originW || 40;    // 截取的精灵图片中的 精灵的宽高。
15             this.originH =  option.originH ||65;
16             this._dirIndex = 0;
17             this._imgSrc = option.imgSrc || '';
18         },
19         //渲染当前动画
20         render: function( ctx ) {// 把自己画 到画布上去
21             //第一步： 把图片加载
22             var img = new Image();
23             img.src = this._imgSrc;
24             var self = this;
25             img.onload = function() {
26                 var frameIndex = 0;
27                 // this == img
28                 // 第二步：加载完图片后，启动一个时钟，不停的渲染动画
29                 setInterval(function(){
30                     ctx.clearRect( 0,0 , ctx.canvas.width , ctx.canvas.height);
31                     ctx.drawImage(
32                             img //绘制的原始图片
33                             , frameIndex * self.originW  // 剪切图片的x坐标
34                             , self._dirIndex * self.originH
35                             , self.originW
36                             , self.originH
37                             , self.x
38                             , self.y
39                             , self.w
40                             , self.h
41                     );
42                     frameIndex ++ ;
43                     frameIndex %= 4;
44                 }, 1000 / self.fps)
45             }
46         },
47         //改变方向
48         changeDir: function( dir ) {
49             if( dir == 'left' ) {
50                 this._dirIndex = 1;
51             }
52             if( dir == 'right' ) {
53                 this._dirIndex = 2;
54             }
55             if( dir == 'up' ) {
56                 this._dirIndex = 3;
57             }
58             if( dir == 'down' ) {
59                 this._dirIndex = 0;
60             }
61         }
62     };
63 </script>