今回から取り組む新たなお題をjsdo.
マウスポインタの動く位置にランダムなカラーと大きさのインスタンスを置く
落下のアニメーションに入る前に,
<script src="http://code.createjs.com/easeljs-0.6.1.min.js"></script>
初期設定の関数は,
var stage;
function initialize() {
var canvasElement = document.getElementById("myCanvas");
stage = new createjs.Stage(canvasElement);
stage.addEventListener("stagemousemove", addInstance);
}
function addInstance(eventObject) {
createInstance(stage.mouseX, stage.mouseY);
stage.update();
}
Shapeインスタンスをつくる関数
円のShapeインスタンスをつくって返す関数
function createInstance(x, y) {
var instance = createShape(2, 10);
instance.x = x;
instance.y = y;
stage.addChild(instance);
}
function createShape(min, max) {
var instance = new createjs.Shape();
var radius = getRandom(min, max);
var color = Math.floor(Math.random() * 0xFFFFFF);
instance.graphics.beginFill(createjs.Graphics.getRGB(color))
.drawCircle(0, 0, radius);
return instance;
}
function getRandom(min, max) {
var randomNumber = Math.random() * (max - min) + min;
return randomNumber;
}