問題 canvasでアナログ時計って作れる? 答え 作りましょう。 今回は、1つのcanvas要素を用いて、1秒ごとに時計全体を書き直す形で実装する。 canvasは、ほぼWindows付属のペイントの表示領域のようなものと考えてよく、一度描画した図形を再取得して描画しなおしたり、位置をずらしたり、回転したりといったことはできない。フォトショップで言うレイヤーのようなものはなく、canvasが1つしかないなら、毎秒書き直すのがよくある実装だと思う。 時計の表示には以下の要素が考えられる、 文字盤 背景 時間の目盛り 分の目盛り 時針 分針 秒針 シンプルな時計を作るので、文字盤や背景は省略する。 時間の目盛り、分の目盛りはいつも固定位置に、時針、分針、秒針は時刻に応じた位置に表示する。 それぞれの描画メソッドをつくり、タイマーで1秒おきに更新できる仕組みを作ったら出来上がり。 Demo S
![【JavaScript】canvasでアナログ時計 at softelメモ](https://cdn-ak-scissors.b.st-hatena.com/image/square/de5e407114ff945f3af23ca8ed39d27203275af9/height=288;version=1;width=512/https%3A%2F%2Fwww.softel.co.jp%2Fblogs%2Ftech%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F03%2Fclock.jpg)