[JavaScript] 時計の描画 - ヤマカサのプログラミング勉強日記

時計

JavaScript の canvas を使ってアナログ時計を描画します。

コードについて

目盛り

時計の目盛りは Path 設定して線を描いています。

  drawDial(ctx, cx, cy) {
    // 時針の目盛りを描画
    ctx.strokeStyle = "rgb(0, 0, 255)";
    for (let i = 0; i < 12; i++) {
      ctx.beginPath();
      let t = Math.PI * 30 * i / 180;
      ctx.moveTo(cx + 150 * Math.cos(t), cy + 150 * Math.sin(t));
      ctx.lineTo(cx + 130 * Math.cos(t), cy + 130 * Math.sin(t));
      ctx.stroke();
    }
    // 分針の目盛りを描画
    ctx.strokeStyle = "rgb(0, 255, 0)";
    for (let i = 0; i < 60; i++) {
      if ((6 * i) % 30 == 0) continue;
      ctx.beginPath();
      let t = Math.PI * 6 * i / 180;
      ctx.moveTo(cx + 150 * Math.cos(t), cy + 150 * Math.sin(t));
      ctx.lineTo(cx + 140 * Math.cos(t), cy + 140 * Math.sin(t));
      ctx.stroke();
    }
  }

時計の針の移動

時計の針の移動はアニメーション的な動きをするので、requestAnimationFrame() を使います。あまり、使い方を分かっていないんですが、初めに、描画の部分を呼び出します。

requestAnimationFrame(() => clock.drawClock(0))

そして、

  drawClock(t) {
    this.ctx.clearRect(0, 0, 300, 300);
    this.drawDial(this.ctx, this.cx, this.cy);
    this.drawHandOfWatch(this.ctx, t, this.cx, this.cy);
    window.requestAnimationFrame(() => this.drawClock((t + 1)) % 43200);
  }