<script>
var stage, circle;
function init() {
stage = new createjs.Stage("demoCanvas");
circle = stage.addChild(new createjs.Shape());
circle.graphics.beginFill("red").drawCircle(50,50,50);
circle.x = 0;
circle.y = 0;
// All the same from above as 0.1
createjs.Ticker.addEventListener("tick", tick); // Add a "tick" event so that the function tick(){...} runs periodically
}
function tick() {
circle.alpha = 0.2;
if (circle.hitTest(stage.mouseX, stage.mouseY)) { circle.alpha = 1; } // If mouse hits the circle, change the circle colour to solid
stage.update(); // Draw on canvas (notice it needs to be updated constantly so we did not draw in init() function cuz it's pointless)
}
</script>
<canvas id="demoCanvas" width="300" height="100">
alternate content
</canvas>
<script>
init();
</script> |