Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.


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


Code Block
languagejs
themeEclipse
titleCode from createjs
linenumberstrue
// 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();