【JavaScript】canvasでアナログ時計 at softelメモ

問題 canvasでアナログ時計って作れる？ 答え 作りましょう。 今回は、1つのcanvas要素を用いて、1秒ごとに時計全体を書き直す形で実装する。 canvasは、ほぼWindows付属のペイントの表示領域のようなものと考えてよく、一度描画した図形を再取得して描画しなおしたり、位置をずらしたり、回転したりといったことはできない。フォトショップで言うレイヤーのようなものはなく、canvasが1つしかないなら、毎秒書き直すのがよくある実装だと思う。 時計の表示には以下の要素が考えられる、 文字盤 背景 時間の目盛り 分の目盛り 時針 分針 秒針 シンプルな時計を作るので、文字盤や背景は省略する。 時間の目盛り、分の目盛りはいつも固定位置に、時針、分針、秒針は時刻に応じた位置に表示する。 それぞれの描画メソッドをつくり、タイマーで1秒おきに更新できる仕組みを作ったら出来上がり。 Demo S

[mzkzzz]

canvasでアナログ時計