星を描画して回転させるアニメーション -『CreateJS』
- uto usui
- //
- canvas
- CreateJs
- javascript
- library
CreateJsを使って星を回転のアニメーションを加えて、canvas
に描いてみます。
JavaScript
var stage;
function init() {
stage = new createjs.Stage('myCanvas');
var myShape = new createjs.Shape();
stage.addChild(myShape);
myShape.x = 100;
myShape.y = 100;
//
draw(myShape.graphics);
//
// 常にStageを更新
createjs.Ticker.addEventListener('tick', stage);
// 適切なフレームレート
createjs.Ticker.timingMode = createjs.Ticker.RAF;
// イベントを登録
createjs.Ticker.addEventListener('tick',rotate);
//
// 回転のアニメーション
function rotate() {
myShape.rotation += .5;
}
}
function draw(myGraph) {
var randNum = Math.floor(Math.random() * 0xFFFFFF);
var randColor = createjs.Graphics.getRGB(randNum);
// 星を描画
myGraph.beginFill(randColor).drawPolyStar(0, 0, 50, 5,.5,-90);
// 更新
stage.update();
}
init();