...
Tip |
---|
Use "{" Createjs macro Use "{" Canvas macro to have a tag with id Use "{" Javascript Code Segment macro to paste the JAVA Script (20180528 Now loads from CDN) |
Createjs |
---|
Canvas |
---|
Javascript |
---|
AJS.toInit(function(){
var stage, timeCircle, tickCircle;
function init() {
stage = new createjs.Stage("demoCanvas");
timeCircle = new createjs.Shape();
timeCircle.graphics.beginFill("red").drawCircle(0, 0, 40);
timeCircle.y = 50;
stage.addChild(timeCircle);
tickCircle = new createjs.Shape();
tickCircle.graphics.beginFill("blue").drawCircle(0, 0, 40);
tickCircle.y = 150;
stage.addChild(tickCircle);
createjs.Ticker.addEventListener("tick", tick);
createjs.Ticker.setFPS(50);
}
function tick(event) {
// time based
timeCircle.x = timeCircle.x + (event.delta)/1000*100;
if (timeCircle.x > stage.canvas.width) { timeCircle.x = 0; }
// not time based:
tickCircle.x = tickCircle.x + 5; // 100 / 20 = 5
if (tickCircle.x > stage.canvas.width) { tickCircle.x = 0; }
stage.update(event);
} |
Javascript |
init(); }); |
Code Block | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
// Please visit www.createjs.com and download the examples by GIT var stage, timeCircle, tickCircle; function init() { stage = new createjs.Stage("demoCanvas"); timeCircle = new createjs.Shape(); timeCircle.graphics.beginFill("red").drawCircle(0, 0, 40); timeCircle.y = 50; stage.addChild(timeCircle); tickCircle = new createjs.Shape(); tickCircle.graphics.beginFill("blue").drawCircle(0, 0, 40); tickCircle.y = 150; stage.addChild(tickCircle); createjs.Ticker.addEventListener("tick", tick); createjs.Ticker.setFPS(50); } function tick(event) { // time based timeCircle.x = timeCircle.x + (event.delta)/1000*100; if (timeCircle.x > stage.canvas.width) { timeCircle.x = 0; } // not time based: tickCircle.x = tickCircle.x + 5; // 100 / 20 = 5 if (tickCircle.x > stage.canvas.width) { tickCircle.x = 0; } stage.update(event); } init(); |
...