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
秒針と分針、時針に加えて60個の目盛りと数字も描画します。
- 時間を表す目盛りを追加
- それぞれの針に色を設定
- 目盛りと文字のスタイルを調整
- それぞれの描画ごとに関数で分けました
CodePenで動作例が見れます。
https://codepen.io/niwunePenguin/pen/ZEPYpzz