アナログ時計をHTML5のCanvasとJavaScriptで作ってみた
-
senritsuki
- 10120
- 0
- 1
- 1
-
- いいね！1
センリツキ@C96 3日目 西3O43b
@senritsuki
さて本日、HTML5のCanvasとJavaScriptの勉強として、「アナログ時計」作りに挑戦してみました。<アナログ時計>を頭につけてつぶやいていきます。 http://t.co/Di9DWi4f
2012-08-04 23:17:18
拡大
センリツキ@C96 3日目 西3O43b
@senritsuki
<アナログ時計作り> まずCanvas。CanvasとはWebブラウザ上で絵を描くための技術で、HTML5で新たに<canvas>というタグが追加されています。今回のアナログ時計は、このCanvasを使って描写していきます。
2012-08-04 23:26:44
センリツキ@C96 3日目 西3O43b
@senritsuki
<アナログ時計作り> Canvasについては次のWebサイトが詳しい。 http://t.co/KKGUeNKR
2012-08-04 23:27:25
センリツキ@C96 3日目 西3O43b
@senritsuki
<アナログ時計作り> 続いてアニメーション。Canvasでは静止画を描けるものの、絵を動かすことは不可能。そこでJavaScriptを使って、一定時間間隔でCanvas描写を繰り返し、アニメーションを描きます。
2012-08-04 23:31:52
センリツキ@C96 3日目 西3O43b
@senritsuki
<アナログ時計作り> 先のツイートに誤りが。「Canvasでは静止画を描けるものの、絵を動かすことは不可能。そこでJavaScriptを使って、……」とつぶやきましたが、たとえ静止画だけでもJavaScriptは必須みたいです、失礼しました。
2012-08-05 00:10:51
センリツキ@C96 3日目 西3O43b
@senritsuki
<アナログ時計作り> そのためにまず、HTMLからJavaScriptを呼び出すことが必要です。方法は幾つかありますが、今回は<body onload="main()">と、bodyタグのonload属性を指定することで、ページ読み込み完了時にmain()を呼び出させます。
2012-08-04 23:35:47
センリツキ@C96 3日目 西3O43b
@senritsuki
<アナログ時計作り> 続いて一定時間間隔で関数を呼び出す方法。JavaScriptにはsetTimeout()という関数があり、例えばsetTimeout("main()",100)とすると、およそ100ミリ秒後にmain()が呼び出されます。
2012-08-04 23:43:12
センリツキ@C96 3日目 西3O43b
@senritsuki
<アナログ時計作り> JavaScriptにはSleep関数が無いので、負荷を掛けずに無限ループを生成するには、setTimeout()で一定時間後に自身の関数を呼び出させる方法を使うのが一般的みたい。
2012-08-04 23:46:19
センリツキ@C96 3日目 西3O43b
@senritsuki
<アナログ時計作り> setTimeoutについてはMDNが参考になる。 https://t.co/l6W4OxMg
2012-08-04 23:48:08
センリツキ@C96 3日目 西3O43b
@senritsuki
<アナログ時計作り> つづいては日時。JavaScriptではDateオブジェクトが用意されており、var date = new Date()とすると、dateに現在日時のDateインスタンスが格納されています。
2012-08-04 23:56:45
センリツキ@C96 3日目 西3O43b
@senritsuki
<アナログ時計作り> Dateオブジェクトには多くのメソッドが用意されていて、年・月・日・曜日・時・分・秒、といった時計に必要な情報はこのメソッドを通して取得することが出来ます。メソッドの種類はこのページが詳しそう。 http://t.co/0TUcuRmN
2012-08-04 23:59:48
センリツキ@C96 3日目 西3O43b
@senritsuki
<アナログ時計作り> いよいよCanvasへの描写。まずDOMのgetElementById("canvasタグのid")でcanvas要素を取得して、取得したcanvas.getContext("2D")で2Dコンテキストを取得します。
2012-08-05 00:15:39
センリツキ@C96 3日目 西3O43b
@senritsuki
<アナログ時計作り> この処理の流れはHTML5.jpの「Canvasの使い方」が参考になる。 http://t.co/o3KqALYI
2012-08-05 00:18:24
センリツキ@C96 3日目 西3O43b
@senritsuki
<アナログ時計作り> Canvasのコンテキストさえ取得できれば、あとは時計を描くだけ。パスの線を引くmoveTo()とlineTo()、パスに円を描くarc()、パスを線で描写するstroke()、パスを塗りつぶすfill()、文字を描くfillText()、etc...
2012-08-05 00:24:39
センリツキ@C96 3日目 西3O43b
@senritsuki
<アナログ時計作り> Canvasで出来ることはHTML5.jpの「Canvasリファレンス」にまとまっているので、ここを参考にすれば、時計くらいなら簡単に描けてしまいます。 http://t.co/VXEPHhca
2012-08-05 00:27:56
センリツキ@C96 3日目 西3O43b
@senritsuki
<アナログ時計作り> ……と、ざっくりな手順でしたが、このような流れでアナログ時計を作り、デザインを切り替えるオマケ機能等も追加して、完成させてみました。
2012-08-05 00:35:02
センリツキ@C96 3日目 西3O43b
@senritsuki
<アナログ時計作り> 完成版。全スクリプトを1ファイルに詰め込んでいます。 | 「アナログ時計 - 旋律記」 http://t.co/UuTHrNaA
2012-08-05 00:36:12
センリツキ@C96 3日目 西3O43b
@senritsuki
<アナログ時計作り> ソースコードはこちら。 | 「アナログ時計をHTML5のCanvasとJavaScriptで作ってみた - 旋律記 in はてなダイアリー」 http://t.co/QMjcKk1I
2012-08-05 00:37:47
センリツキ@C96 3日目 西3O43b
@senritsuki
<アナログ時計作り> アナログ時計作りは以上です。次回はもう少し凝ったことに挑戦してみたいところ。
2012-08-05 00:40:19