create.js - square

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 shapeA = new createjs.Shape();
  var shapeB = new createjs.Shape();
  // 表示リストに追加
  stage.addChild(shapeA);
  stage.addChild(shapeB);
  // 座標
  shapeA.x = 50;
  shapeA.y = 50;
  shapeB.x = 50;
  shapeB.y = 50;
  // 描画
  drawA(shapeA.graphics);
  drawB(shapeB.graphics);
}

// ランダムカラー生成
function randColorCreate () {
	var randNum = Math.floor(Math.random() * 0xFFFFFF);
  var randColor = createjs.Graphics.getRGB(randNum);
  return randColor;
}

function drawA (myGraphics) {
	var color = randColorCreate();
  // 塗り
  // drawRect(X, Y, 幅, 高さ)
  myGraphics.beginFill(color).drawRect(0, 0, 50, 50);
  // 更新
  stage.update();
}

function drawB (myGraphics) {
	var color = randColorCreate();
  // drawRoundRect(X, Y,幅, 高さ, 角丸の幅, 角丸の高さ)
  myGraphics.beginStroke(color).setStrokeStyle(3).drawRoundRect(100, 100, 50, 50, 10, 10);
  //
  stage.update();
}

init();