canvas sprite动画 简单封装

 function SpritCtx(img, size, pos, turnTime, totalCount, ctx) {
     size = size || {};
     pos = pos || {};
     //img
     this.img = img;
     //size
     this.width = size.width || 5;
     this.height = size.height || 5;
     //pos
     this.left = pos.left || 0; //画布上的位置left
     this.top = pos.top || 0; //画布上的位置top
     //初始化cellNum,count,cell,row
     this.cellNum = 1;
     var that = this;
     this.img.onload = function() {
         that.cellNum = Math.floor(that.img.width / that.width); //每行的个数
     }
     this.count = 0; //显示第几个
     this.cell = 0;
     this.row = 0;
     //定时器时间
     this.turnTime = turnTime || 90;
     //图片数量
     this.totalCount = totalCount;
     //canvas
     this.ctx = ctx;
     //定时器
     this.xTimer = null;
 }

 SpritCtx.prototype.draw = function() {
     this.ctx.drawImage(
         this.img,
         this.width * this.cell,
         this.height * this.row,
         this.width,
         this.height,
         this.left,
         this.top,
         this.width,
         this.height
     );
     return this;
 };

 SpritCtx.prototype.start = function() {
     var that = this;
     clearInterval(this.xTimer);
     this.xTimer = setInterval(function () {
         that.timerFn();
     }, this.turnTime);
     return this;
 };

 SpritCtx.prototype.stop = function() {
     clearInterval(this.xTimer);
     return this;
 };

 SpritCtx.prototype.timerFn = function() {
     this.count++;
     this.count %= this.totalCount;
     this.row = Math.floor(this.count / this.cellNum); //第几行
     this.cell = this.count - this.row * this.cellNum; //第几列
     return this;
 };

 SpritCtx.prototype.turnPos = function(left, top) {
     this.left = left || 0;
     this.top = top || 0;
     return this;
 };