やっぱり。JavaScript！- Canvasで時計(2)

2022年5月25日 06:13

次に時計の針を表示できるようにしていきます。時計の目盛りと描画の方法は同じです。moveTo()とlineTo()を使います。

まず、パラメータの設定をしておきます。時計の針の長さの変数定義です。

  const handHourWidth = 6;
  const handHourLength = 0.6;
  const handMinuteWidth = 4;
  const handMinuteLength = 0.9;
  const handMinuteLength2 = -0.15;  // 突き出る分
  const handSecondWidth = 2;
  const handSecondLength = 0.95;
  const handSecondLength2 = -0.2;

時間の針

短身を表示できるようにしていきます。とりあえず仮の時間を決めてやりそれを表示できるようにします。(7時00分15秒)

  const hour = 7;
  const minute = 00;
  const second = 15;

時間の針を表示させます。時間は12時間で一回り(2π/12)なので時間の変数を12で割って表示させます(hour / 12)。

　context.beginPath();
  context.strokeStyle = colorBlack;
  context.lineWidth = handHourWidth;
  context.moveTo(canvasWidth / 2, canvasHeight / 2);
  context.lineTo(canvasWidth / 2 + (Math.cos(calcRadian(hour / 12)) * flameR) * handHourLength, canvasHeight / 2 + (Math.sin(calcRadian(hour / 12)) * flameR) * handHourLength);
  context.stroke();

時計の針の長さ決めて表示させています。
(handHourWidth、handHourLength)

分の針と秒の針

分は60分で一回り(2π/60)、

 // 分針
  context.beginPath();
  context.strokeStyle = colorBlack;
  context.lineWidth = handMinuteWidth;
  context.moveTo(canvasWidth / 2 + (Math.cos(calcRadian((minute + second / 60) / 60)) * flameR) * handMinuteLength2, canvasHeight / 2 + (Math.sin(calcRadian((minute + second / 60) / 60)) * flameR) * handMinuteLength2);
  context.lineTo(canvasWidth / 2 + (Math.cos(calcRadian((minute + second / 60) / 60)) * flameR) * handMinuteLength, canvasHeight / 2 + (Math.sin(calcRadian((minute + second / 60) / 60)) * flameR) * handMinuteLength);
  context.stroke();

秒は1分で60秒

 // 秒針
  context.beginPath();
  context.strokeStyle = colorRed;
  context.lineWidth = handSecondWidth;
  context.moveTo(canvasWidth / 2 + (Math.cos(calcRadian(second / 60)) * flameR) * handSecondLength2, canvasHeight / 2+ (Math.sin(calcRadian(second / 60)) * flameR) * handSecondLength2);
  context.lineTo(canvasWidth / 2 + (Math.cos(calcRadian(second / 60)) * flameR) * handSecondLength, canvasHeight / 2 + (Math.sin(calcRadian(second / 60)) * flameR) * handSecondLength);
  context.stroke();

これで実行xいてやると

この時計を動かします。動かすためには時間を取得してこの時計に反映させる必要があります。

仮の時間を変数宣言して表示の確認をしていましたが、実際の時間を取得して反映させてみます。

 const date = new Date();
 const hour = date.getHours() % 12;
 const minute = date.getMinutes();
 const second = date.getSeconds();

とすれば時間を変数に入れて使えるようにできます。これを保存してリロードして表示させると、その時の現在時刻を指します。

これをリアルタイムに表示させるには

window.onload = function() {
  setInterval(draw, 1000);
};

"setInterval”を作って、1000ミリビョウごとに、draw()を実行します。すると

と表示されます。draw()の関数で1秒ごとに描画され続けているのが原因で、これを解消するために、draw()の関数で1秒ごと実行されるたびに画面を消す操作をします。

context.clearRect(0, 0, canvasWidth, canvasHeight);

この命令画面を一旦クリア、消去することをdraw()に書いてやります。これで1秒ごとに再描画されて秒針が動いているように見えるようになります。

参考サイト

この記事が気に入ったらサポートをしてみませんか？