lcg #005:3

CreateJS - add animation

by dirkk0

HTML

<canvas id="canvas" width="300" height="300"></canvas>

JavaScript

var stage = new createjs.Stage("canvas");

var c = new createjs.Graphics().f("#f00").drawCircle(100, 100, 60)
var r = new createjs.Graphics().f("#ff0").rect(100, 0, 80, 80);

var s1 = new createjs.Shape(r);
var s2 = new createjs.Shape(c);

stage.addChild(s2);
stage.addChild(s1);


createjs.Ticker.addEventListener("tick", handleTick);
createjs.Ticker.setInterval(25);
createjs.Ticker.setFPS(40);

function handleTick() {
    //Circle will move 10 units to the right.
    s1.x += 5;
    //Will cause the circle to wrap back
    if (s1.x > stage.canvas.width) {
        s1.x = 0;
    }
    stage.update();
}