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); } 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(); |