zoukankan      html  css  js  c++  java
  • canvas sprite动画 简单封装

     1 function SpritCtx(img, size, pos, turnTime, totalCount, ctx) {
     2     size = size || {};
     3     pos = pos || {};
     4     //img
     5     this.img = img;
     6     //size
     7     this.width = size.width || 5;
     8     this.height = size.height || 5;
     9     //pos
    10     this.left = pos.left || 0; //画布上的位置left
    11     this.top = pos.top || 0; //画布上的位置top
    12     //初始化cellNum,count,cell,row
    13     this.cellNum = 1;
    14     var that = this;
    15     this.img.onload = function() {
    16         that.cellNum = Math.floor(that.img.width / that.width); //每行的个数            
    17     }
    18     this.count = 0; //显示第几个
    19     this.cell = 0;
    20     this.row = 0;
    21     //定时器时间
    22     this.turnTime = turnTime || 90;
    23     //图片数量
    24     this.totalCount = totalCount;
    25     //canvas
    26     this.ctx = ctx;
    27     //定时器
    28     this.xTimer = null;
    29 }
    30 
    31 SpritCtx.prototype.draw = function() {
    32     this.ctx.drawImage(
    33         this.img,
    34         this.width * this.cell,
    35         this.height * this.row,
    36         this.width,
    37         this.height,
    38         this.left,
    39         this.top,
    40         this.width,
    41         this.height
    42     );
    43     return this;
    44 };
    45 
    46 SpritCtx.prototype.start = function() {
    47     var that = this;
    48     clearInterval(this.xTimer);
    49     this.xTimer = setInterval(function () {
    50         that.timerFn();
    51     }, this.turnTime);
    52     return this;
    53 };
    54 
    55 SpritCtx.prototype.stop = function() {
    56     clearInterval(this.xTimer);
    57     return this;
    58 };
    59 
    60 SpritCtx.prototype.timerFn = function() {
    61     this.count++;
    62     this.count %= this.totalCount;
    63     this.row = Math.floor(this.count / this.cellNum); //第几行
    64     this.cell = this.count - this.row * this.cellNum; //第几列
    65     return this;
    66 };
    67 
    68 SpritCtx.prototype.turnPos = function(left, top) {
    69     this.left = left || 0;
    70     this.top = top || 0;
    71     return this;
    72 };
  • 相关阅读:
    抓包工具charles导出接口数据
    抓包工具Charles使用(mac)
    HTTP信息抓包工具charles安装(mac)
    接口自动化HttpRunner安装使用 ( mac)
    接口自动化HttpRunner安装
    JMETER服务器资源监控
    调试工具刷新网页
    mac修改环境变量path
    JMETER性能指标分析
    Jmeter监控报错ERROR: java.net.ConnectException: Connection refused: connect的解决办法(I)
  • 原文地址:https://www.cnblogs.com/king2016/p/5997222.html
Copyright © 2011-2022 走看看