create.js - star

by uto usui

HTML

<div class="wrap">

  <h1>create.js</h1>
  <p>星を描く<br>(ランダムな塗り)</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 shape = new createjs.Shape();
  stage.addChild(shape);
  //
  shape.x = 50;
  shape.y = 50;
  //
  draw(shape.graphics);
}

function draw(myGraph) {
	// ランダムなカラー値
	var randNum = Math.floor(Math.random() * 0xFFFFFF);
	var randColor = createjs.Graphics.getRGB(randNum);
  // graphics.drawPolyStar(x, y, r, 頂点の数, 谷の深さ, 起点の角度)
  myGraph.beginFill(randColor).drawPolyStar(50, 50, 50, 5,.5,-90);
  //
  stage.update();
}

init();