create.js - clickEvent

by uto usui

HTML

<div class="wrap">

  <h1>create.js</h1>
  <p>クリックイベント</p>
  <canvas id="myCanvas" width="250" height="250"></canvas>

</div>

SCSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  font-family: Helvetica, 'Helvetica';
  text-align: center;
}

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

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

JavaScript

window.addEventListener("load", init);

function init() {
  var canvas = document.getElementById('myCanvas');
  var stage = new createjs.Stage(canvas);
  var clock = new createjs.Container();
  //
  clock.x = canvas.width / 2;
  clock.y = canvas.height / 2;
  stage.addChild(clock);
  //
  var bg = new createjs.Shape();
  bg.graphics.setStrokeStyle(1).beginStroke('#888888').drawCircle(0, 0, 100);
  clock.addChild(bg);
  // 目盛りを描画
  var steps = 60; // 目盛りの数
  //
  for (var i = 0; i < steps; i++) {
    var angle = i * (360 / steps);
    var radian = angle * Math.PI / 180;
    // 始点
    var startX = 95 * Math.cos(radian);
    var startY = 95 * Math.sin(radian);
    // 終点
    var endX = 100 * Math.cos(radian);
    var endY = 100 * Math.sin(radian);
    //
    bg.graphics.setStrokeStyle(1).beginStroke("#888888").moveTo(startX, startY).lineTo(endX, endY);
  }
  createjs.Ticker.addEventListener("tick", stage);
}