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;
};