webmanab.html

menu

星を描画して回転させるアニメーション -『CreateJS』

 

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();


share

lab