Canvas EaselJS animations demo

by Michał Belka

HTML

<script src="https://code.createjs.com/easeljs-0.8.0.min.js"></script>
<canvas id="canvas" width="300" height="300"></canvas>
<select onchange="createjs.Ticker.setFPS(Number(this.value));">
    <option value="10">10 fps</option>
    <option value="20" selected="">20 fps</option>
    <option value="30">30 fps</option>
    <option value="40">40 fps</option>
    <option value="50">50 fps</option>
    <option value="60">60 fps</option>
</select>

CSS

canvas {
    border: 1px red solid;
}

JavaScript

var stage, circle, box;

function init() {
    stage = new createjs.Stage("canvas");
    
    circle = new createjs.Shape();
    circle.graphics.beginFill("rgb(200, 255, 255)").s("rgb(0, 140, 0)").drawCircle(0, 0, 50);
    circle.x = 70;
    circle.y = 70;
    
    box = new createjs.Shape();
    box.graphics.f("rgb(255, 100, 50)").drawRoundRect(-50,-50,100,100, 25);
    box.x = 70;
    box.y = 190;
    
    stage.addChild(circle);
    stage.addChild(box);
    
    createjs.Ticker.on("tick", tick);
    createjs.Ticker.setFPS(20);
}

function tick(event) {
    // time based
    // event.delta is time in ms, we move 100px/sec
    circle.x = circle.x + (event.delta)/1000*100;
    if (circle.x > stage.canvas.width+50) { circle.x = -50; }
    
    // not time based:
    box.x = box.x + 5; // 100 / 20 = 5
    if (box.x > stage.canvas.width+50) { box.x = -50; }
    
    stage.update(event);
}

document.addEventListener('DOMContentLoaded', init, false);