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

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

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


更には当アーティクルタイトルの如く、 自分の好みにスキンを新しく追加することが出来、 其の際には追加スキンの設定を記述した moreskins.js が参考になります。
swissRail: {
outerBorder: { lineWidth: 1, radius:95, color: "black", alpha: 1 },
smallIndicator: { lineWidth: 2, startAt: 89, endAt: 93, color: "black", alpha: 1 },
largeIndicator: { lineWidth: 4, startAt: 80, endAt: 93, color: "black", alpha: 1 },
hourHand: { lineWidth: 8, startAt: -15, endAt: 50, color: "black", alpha: 1 },
minuteHand: { lineWidth: 7, startAt: -15, endAt: 75, color: "black", alpha: 1 },
secondHand: { lineWidth: 1, startAt: -20, endAt: 85, color: "red", alpha: 1 },
secondDecoration: { lineWidth: 1, startAt: 70, radius: 4, fillColor: "red", color: "red", alpha: 1 }
},


Sand: {
outerBorder: { lineWidth:1, radius:70, color: "black", alpha: 0.5 },
smallIndicator: { lineWidth: 3, startAt: 50, endAt: 70, color: "#0066FF", alpha: 0.5 },
largeIndicator: { lineWidth: 200, startAt: 80, endAt: 95, color: "#996600", alpha: 0.75 },
hourHand: { lineWidth: 4, startAt: 0, endAt: 65, color: "black", alpha: 0.9 },
minuteHand: { lineWidth: 3, startAt: 0, endAt: 80, color: "black", alpha: 0.85 },
secondHand: { lineWidth: 1, startAt: 0, endAt: 85, color: "black", alpha: 1 },
secondDecoration: { lineWidth: 2, startAt: 5, radius: 10, fillColor: "black", color: "black", alpha: 1 }
},


Babosa: {
outerBorder: { lineWidth: 100, radius:25, color: "blue", alpha: 0.25 },
smallIndicator: { lineWidth: 3, startAt: 90, endAt: 95, color: "#3366CC", alpha: 1 },
largeIndicator: { lineWidth: 4, startAt: 75, endAt: 95, color: "#3366CC", alpha: 1 },
hourHand: { lineWidth: 4, startAt: 0, endAt: 60, color: "black", alpha: 1 },
minuteHand: { lineWidth: 3, startAt: 0, endAt: 85, color: "black", alpha: 1 },
secondHand: { lineWidth: 12, startAt: 75, endAt: 90, color: "red", alpha: 0.8 },
secondDecoration: { lineWidth: 3, startAt: 0, radius: 4, fillColor: "black", color: "black", alpha: 1 }
},


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

当ブログ2008年6月19日のアーティクル 描画に於けるjavascript技術CANVAS でも参照させていただきました 羽田野太巳 氏の手になるThinkITの記事、 【これならわかる!JavaScript/Ajax】Canvasを試してみませんか? の第1回 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 でもクールなアナログ時計は閲覧可能の様です。
スポンサーリンク

「CANVASを利用した着せ替え可能なアナログ時計」への1件のフィードバック

  1. JavaScriptを使って絵が描けるCanvas

    今日、はまぞうブログの「ホームページ作成浜松Tips」さまのホームページで、CANVASを利用した着せ替え可能なアナログ時計が紹介されていました。小気味良く、アナログ時計が動いています。で、以前、グラフを書くライブラリを調べていたが、javascript を使って書くという発

コメントは受け付けていません。