create.js - rotateAnim

by uto usui

HTML

<div class="wrap">

  <h1>create.js</h1>
  <p>回転するアニメーション</p>
  <canvas id="myCanvas" width="300" height="260"></canvas>

</div>

SCSS

body {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
	font-family: Helvetica, 'Helvetica';
	text-align: center;
  background-image: linear-gradient(-30deg,#f7cac9 20%,#91A8d0 85%);
}

h1 {
	font-size: 42px;
	font-weight: bold;
	color: #32355a;
}

canvas {
	margin: 20px auto;
	border: 3px dashed rgba(#32355a, .55);
  background-color: rgba(white, .15);
}

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