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


