「おはこん番地は!? API」の新機能と、最近話題のHTML5のCanvas要素を使って3D天球儀を作ってみました。
任意の時刻と場所の、太陽と月の位置、月の満ち欠けを3Dで表示します。
ちなみに今年の中秋の名月は9月22日です。
9月22日午後8時の東京の月を見るにはここをクリックしてください。
続きはHTML5の話です。
HTML5のCanvas要素を使う上で問題になるのが、ブラウザによってサポートしているメソッドとその挙動がかなり違うことです。IE8に至ってはそもそもCanvas要素をサポートしていません。そこで幾つか対処法を調べてみました。
1.
まずGoogleが作ったExplorerCanvas。
JavaScriptのライブラリでバックエンドにVMLを使い、IEでCanvasを描画します。このライブラリはよく出来ているのですが、テキスト表示などをサポートしていません。
2.
続いてuuCanvas。
ExplorerCanvasと同様、JavaScriptのライブラリですが、ExplorerCanvasより高機能です。バックエンドにSilverlight、Flash、VMLのどれを使うか選べます。さらに、IE以外のブラウザも非サポートのメソッドを使用できるように拡張してくれます。また、独自のメソッドを使って高速化も可能です。
どちらがよいかはケースによりけりだと思いますので、両方試し軽量かつ意図したとおりに描画される方を選べば良いと思います。