alternate content
Source code
	<script>
		
		var stage, timeCircle;
		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);
            // Mostly same as example 0.1 however didn't set the x because it will be altered in tick function
			
			createjs.Ticker.addEventListener("tick", tick); // Add a "tick" event so that the function tick(){...} runs periodically same as 0.2
			createjs.Ticker.framerate=60; // Set to 60 frames per second
		}
		
		function tick(event) {
			// time based
			timeCircle.x = timeCircle.x + (event.delta)/1000*100; // event.delta means how much time has past since the last tick
			if (timeCircle.x > stage.canvas.width) { timeCircle.x = 0; } // set the circle back to the left side if it's off screen
		
			stage.update();
		}
	</script>



	<canvas id="demoCanvas" width="500" height="200">
		alternate content
	</canvas>


	<script>
	    init();
	</script>
  • No labels