アナログ時計を描画する

  • javascript
  • 閲覧533
5
const canvas = document.getElementById('analogClock');
const ctx = canvas.getContext('2d');

// Center
const radius = (canvas.width / 2) - 10;
const centerX = (canvas.width / 2);
const centerY = (canvas.height / 2);

function drawCap() {
    // Draw Cap nut
    ctx.b...

///*** 無料ユーザー登録後、正常なすべてのコードが表示されます ***///

					
2023-12-25

アナログ時計を描画する

コードの説明
canvasにアナログ時計を描画するコードです。
秒針と分針、時針に加えて60個の目盛りと数字も描画します。

- 時間を表す目盛りを追加
- それぞれの針に色を設定
- 目盛りと文字のスタイルを調整
- それぞれの描画ごとに関数で分けました

CodePenで動作例が見れます。
https://codepen.io/niwunePenguin/pen/ZEPYpzz