tick&draw

Stage

每次tick更新Stage.prototype.update()方法

let stage = new createjs.Stage("canvasElementId");
let image = new createjs.Bitmap("imagePath.png");
stage.addChild(image);
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick(event) {
   image.x += 10;
   stage.update();
}

Stage源码分析

p.update = function(props) {
    if (!this.canvas) { return; }
    if (this.tickOnUpdate) { this.tick(props); }
    if (this.dispatchEvent("drawstart", false, true) === false) { return; }
    createjs.DisplayObject._snapToPixelEnabled = this.snapToPixelEnabled;
    var r = this.drawRect, ctx = this.canvas.getContext("2d");
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    if (this.autoClear) {
        if (r) { ctx.clearRect(r.x, r.y, r.width, r.height); }
        else { ctx.clearRect(0, 0, this.canvas.width+1, this.canvas.height+1); }
    }
    ctx.save();
    if (this.drawRect) {
        ctx.beginPath();
        ctx.rect(r.x, r.y, r.width, r.height);
        ctx.clip();
    }
    this.updateContext(ctx);
    this.draw(ctx, false);
    ctx.restore();
    this.dispatchEvent("drawend");
};

p.tick = function(props) {
  if (!this.tickEnabled || this.dispatchEvent("tickstart", false, true) === false) { return; }
  var evtObj = new createjs.Event("tick");
  if (props) {
    for (var n in props) {
      if (props.hasOwnProperty(n)) { evtObj[n] = props[n]; }
    }
  }
  this._tick(evtObj);
  this.dispatchEvent("tickend");
};