A Clockwork Canvas

習作ですがHTML5 Canvasの時計プログラミングを始めました。「書きました」ではなく「始めました」です。増えます。

github:https://github.com/ivoryworks/clockwork-canvas

習作なので見栄えとか全く考慮してないですが、githubのをそのまま上げてます。

demo:http://www.ivoryworks.com/canvas/clockwork-canvas/

要するにプログラミングの題材によく挙がる時計のオブジェクトです。これをひたすら書いていきます。

一番オーソドックスなのは、秒針がコチコチ進むタイプ（demoの右上）ですが、それ以外は全てmsまで加味してなめらかに描画しています。実際の時計でもこういったタイプのものがありますが、このなめらかに動く秒針はsweep針と呼ぶようです。30msのインターバルタイマー(33FPS)を使用しています。

sweep動作する時計、2つ3つ書いてみると意外に気持ちよくて、いくつか書きました。このプログラムでは、本来時計が持つべき「見て、時刻がわかる」機能の実装を放棄しています。

これまでJavaScriptはまともに勉強したことなかったので、蝶の本を注文しました。週末手にします。オレオレJSを脱却したいな。