アナログ時計を作ってみよう！

loadイベント

　グローバル変数や関数と同様に、他のスクリプトに影響を与えないよう考慮すべきポイントがもう1つあります。それはloadイベントです。特にページがロードされた時にコードが実行される仕組みを、どのように実現するかが問題となります。

　これまでの解説では、コードを見やすくるるために、window.onloadイベントハンドラを使ってきました。ところが、このようなイベントハンドラは、もし他のjsファイルで使っていた場合、あとから読み込まれたjsファイルのイベントハンドラで上書きされてしまいます。

　これを回避するため、本スクリプトではイベントリスナーを使います。

　リスト1は、window.onloadの代わりとなる処理を記述したものです。ブラウザがページのロードを完了するとwindowオブジェクトにloadイベントが発生します。このloadイベントが発生したらinitという関数を実行するようにしたものです。

　init関数には、アナログ時計を描画するための準備を行う処理を記述していきます。

　このコードには、「var g = new Object();」があります。これは本スクリプト内の各種関数から参照される値を格納するために用意したオブジェクトです。

　以上、JavaScriptライブラリ作成のポイントを簡単に解説してきましたが、他のスクリプトを作成する際にも役に立つテクニックですので、ぜひ、覚えておいてください。次に、アナログ時計を表示するコードについて具体的に解説していきましょう。

ページがロードされた時の初期化処理

　ページがロードされるとinit関数が実行されるようにしましたが、ここでは、init関数で行うべき処理を詳しく見ていきましょう（リスト2）。

　この処理では、まずCanvasの2Dコンテキストを生成します。そして、アナログ時計を描画するために必要なCanvasのサイズや中心座標、時計の半径などの情報を集め、それらの値をグローバルな値を格納するために用意したオブジェクトgにセットしておきます。これらの値は、別の関数からオブジェクトgを通して参照されます。

　最後に、文字盤となるbg.pngを読み込みます（図2）。生成したImageオブジェクトも、グローバルな値を格納するためのオブジェクトgにセットしておきます。

　onloadイベントハンドラを使って、画像が読み込まれたら「setInterval(display, 1000);」が実行されるようにしておきます。これは、1秒おきにdisplay関数を実行するための命令です。

　これで、1秒おきに現在の時間を表すアナログ時計を描画するための前処理が出来上がりました。次のページではdisplay関数の詳細を解説します。