CANVASを利用した着せ替え可能なアナログ時計

テキストで設定するだけでHTML画面上に描画の出来るjavascriptライブラリの canvas でアナログ時計にクールなスキンを施せるプラグイン CoolClock - The Javascript Analog Clock の紹介が IDEA*IDEA の2008年9月2日の記事 自在にスキンをカスタマイズできるJavaScriptのアナログ時計『CoolClock』 で紹介されており、様々な色取り取りのスキンが楽しそうでしたので、 当ブログにも掲載を試みました。

ブログへの実装方法はモダンブラウザでならば、 coolclock.js だけ読み込めば可能になり、 表示時の書式は此方 IDはユニークであれば良い様で、 クラスには CoolClock を指定、次にスキン名、時計の大きさ、秒針の表示の有無、最後に標準時との時差を設定出来る様に実装されています。

更には当アーティクルタイトルの如く、 自分の好みにスキンを新しく追加することが出来、 其の際には追加スキンの設定を記述した moreskins.js が参考になります。





此方は世界時計擬き、書式の最後のパラメータの GMTOffset を各自調整することで表示可能になります。
New York Los Angeles London

当ブログ2008年6月19日のアーティクル 描画に於けるjavascript技術CANVAS でも参照させていただきました 羽田野太巳 氏の手になるThinkITの記事、 【これならわかる！JavaScript/Ajax】Canvasを試してみませんか？ の第１回 JavaScriptを使って描画するCanvasとは？ の引用を繰り返せば

HTML 5は策定中ということもあり、2008年4月時点で、HTML 5を完全に実装したWebブラウザはありません。しかし、Canvasに関してはSafari 1.3以降、Opera 9以降、Firefox 1.5以降ですでに実装されています。Internet Explorerには実装されていませんが、CanvasをエミュレートするJavaScriptライブラリを使うことで、あたかもCanvasが組み込まれているかのように図を描くことができます。ですのでCanvasは、すでに実用レベルに達していると言っても良いでしょう。

とあり、次頁を繰れば、 Google提供のCanvasを IE でエミュレートするJavaScriptライブラリ ExplorerCanvas ダウンロードし、 IE でロードするようにscript要素を記述すれば設置できる旨、 述べられています。 実際に当アーティクルにも適用しましたが、 多少問題のあるものの IE でもクールなアナログ時計は閲覧可能の様です。