スキップナビゲーションリンク

HTML5 canvas デジタル&アナログ時計

動作対象環境

仕様

動作サンプル

サンプルのみを別窓で表示

サンプルダウンロード

サンプルダウンロード

解説

canvas要素を利用したHTML5 Canvasの図形描画機能は、2010年11月現在、Chrome、Safari 4~、FireFox3.5~、Opera 10~で動作が確認できます。
何事にも対応が慎重なIEはCanvasも未実装のため、Google ExplorerCanvasというIE専用のCanvas描画ライブラリによって機能補完が可能ですが、
すべてのメソッドが可動状態にはなく、使えない機能もあります。

本サンプルにおいても、「excanvas.js」を読み込んでIEへの対応を図っておりますが、
「fillText」というメソッドが利用できないため、時計の中央部のデジタル表示時計の出力ができませんでしたので、
IEはアナログ時計のみの実装にとどめました。

Canvas要素によって、本サンプルの時計のような図形のアニメーションが、
画像ファイルをまったく利用することなく実装することができました。
時計の枠の角丸や背景のグラデーション、文字盤のラインの影などもスクリプトだけで実装しています。
非常に有用かつ将来性を感じる機能です。

関連情報