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

绘制思路：

1.封装一个对象出来：

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

html文件：

 <script>
     (function(){
         var canvas = document.querySelector( '#cavsElem' );
         var ctx = canvas.getContext( '2d' );
         canvas.width = 600;
         canvas.height = 600;
         canvas.style.border = "1px solid #000";
         var s=new Sprite({
             x:300,//在画布上的坐标
             y:300,
             w:80,//画布上的宽高
             h:130,
             fps:4,//速度
             originW:40,//截取的精灵图片中的精灵的宽高。
             originH:65,
             imgSrc:'gameImgs/DMMban.png'
         });
         s.render(ctx);
         var btnLeft = document.getElementById('btn-dir-left');
         btnLeft.onclick = function() {
             s.changeDir('right');
         };
         var btnRight = document.getElementById('btn-dir-right');
         btnRight.onclick = function() {
             s.changeDir('right');
         };
         var btnUp = document.getElementById("btn-dir-up");
         btnUp.onclick = function() {
             s.changeDir('up');
         };
         var btnDown = document.getElementById('btn-dir-down');
         btnDown.onclick = function() {
             s.changeDir('down');
         };
         }());
 </script>

js文件：

 <script>
     function Sprite( option ) {
         //构造函数执行的时候，立即调用初始化的函数
         this._init( option );
     }
     Sprite.prototype = {
         //初始化
         _init: function( option ) {
             this.x = option.x === 0 ? 0 : (option.x || 10);//在画布上的坐标
             this.y = option.y === 0 ? 0 : (option.y || 10);//
             this.w = option.w || 40; // 绘制到canvas上的宽高
             this.h = option.h || 65;
             this.fps =  option.fps || 10; // frame per second
             this.originW = option.originW || 40;    // 截取的精灵图片中的 精灵的宽高。
             this.originH =  option.originH ||65;
             this._dirIndex = 0;
             this._imgSrc = option.imgSrc || '';
         },
         //渲染当前动画
         render: function( ctx ) {// 把自己画 到画布上去
             //第一步： 把图片加载
             var img = new Image();
             img.src = this._imgSrc;
             var self = this;
             img.onload = function() {
                 var frameIndex = 0;
                 // this == img
                 // 第二步：加载完图片后，启动一个时钟，不停的渲染动画
                 setInterval(function(){
                     ctx.clearRect( 0,0 , ctx.canvas.width , ctx.canvas.height);
                     ctx.drawImage(
                             img //绘制的原始图片
                             , frameIndex * self.originW  // 剪切图片的x坐标
                             , self._dirIndex * self.originH
                             , self.originW
                             , self.originH
                             , self.x
                             , self.y
                             , self.w
                             , self.h
                     );
                     frameIndex ++ ;
                     frameIndex %= 4;
                 }, 1000 / self.fps)
             }
         },
         //改变方向
         changeDir: function( dir ) {
             if( dir == 'left' ) {
                 this._dirIndex = 1;
             }
             if( dir == 'right' ) {
                 this._dirIndex = 2;
             }
             if( dir == 'up' ) {
                 this._dirIndex = 3;
             }
             if( dir == 'down' ) {
                 this._dirIndex = 0;
             }
         }
     };
 </script>