Canvasとは

Canvasとは、ブラウザ上に図を描くために策定された仕様です。

これまでHTML上で図を表現するためには、GIFやJPEGといったフォーマットの画像を用意する必要がありました。また、条件に応じて表示する図を変化させたり、アニメーションを実現するために、FlashやJavaアプレットが使われてきました。

Canvasは、FlashやJavaのようにプラグインを使わずに、JavaScriptベースで図を描くことができます。

実際に、Canvasを使って円グラフを作ってみました。上図はFirefox 2.0での結果をキャプチャーしたものです。Canvasで描かれたのは色がついた図形部分です。Internet Explorer 6以上、Firefox 1.5以上、Opera 9以上、Safari 1.3以上であれば、実際のCanvasの動作をご覧頂くことができます。

[Canvasを使った円グラフの実例]

Canvasの生い立ち

Canvasは、もともとはAppleが発祥で、当初、Mac OSでおなじみのDashboardで使われた技術仕様です。その後、Apple、Mozilla Foundation、Opera Softwareといったブラウザベンダが立ち上げたWHATWGという団体にて策定作業が行われていた「Web Applications」と呼ばれる規格に採用されました。この「Web Applications」は、現在、W3Cが次世代HTML標準を見据え「HTML5」という名称で策定作業に着手しています。

HTML5は策定中ということもあり、HTML5を実装したブラウザはありませんが、Canvasに関しては、Safari1.3以降、Opera9以降、Firefox1.5以降ですでに実装されています。

Internet Explorerの状況

MicrosoftがWHATWGに参画していないせいもあってか、もっともブラウザシェアが高いInternet ExplorerはCanvasに対応していません。これでは、実践においてCanvasの利用がためらわれてしまいます。しかし、GoogleがExplorerCanvasというJavaScriptライブラリを公開したことにより、状況が変わってきました。

ExplorerCanvasは、Internet ExplorerでCanvasをエミュレートするJavaScriptライブラリです。HTMLからSCRIPT要素を使ってExplorerCanvasのjsファイルをロードするだけで利用することが可能です。Safari、Firefox、Operaと同じように、あたかもInternet ExplorerにCanvasが実装されているかのように、Canvas用のJavaScriptコードをInternet Explorer上で実行することができるようになります。一部、完全にはエミュレートできていない部分はあるものの、あまり凝った処理をしなければ、JavaScriptコードの中で、Internet Explorerとそれ以外のブラウザとで条件文岐すら必要ありません。

ExplorerCanvasは、Internet Explorer 6以上で動作しますので、ExplorerCanvasを使えば、実質的にほとんどの訪問者にCanvasで描画した図を表示させることが可能となります。

Canvasの実例

Canvasの実例をいくつかご紹介しましょう。ここで紹介する実例は、高度なものも含まれています。Flashで実現したほうが良いのでは、と思う実例もありますが、CanvasとJavaScriptの組み合わせて、ここまでのことができるという視点でご参考にしてください。まずは、mozilla developer centerのCanvasサンプルをご覧ください。なお、ご覧になる際には、Firefox 1.5以上をお使い下さい。

MDC - Canvas examples

このサンプル集にある「A Basic RayCaster」を初めてみると、Canvasでここまでできるのかと驚きを覚えるでしょう。キーボードの操作でバーチャル空間を移動します。Aキーで左回転、Dキーで右回転、Wキーで前進、Sキーで後進します。

Puzzles using Canvasは、Canvasを使ったパズルゲームです。このページに掲載されている写真画像をクリックすると、その写真のいくつかのピースに分割したパズルがポップアップします。マウスを使って、ピースをひとつずつ移動して、オリジナルの画像を完成させるゲームです。写真画像を組み合わせたCanvasの事例として参考になるでしょう。

Canvascape - "3D Walker"

最後にご紹介するのは、この3D Walkerです。先ほどご紹介したMDCの「A Basic RayCaster」をさらに進化したようなサンプルです。矢印キーで移動し、スペースキーでジャンプします。

Canvasでできること・できないこと

Canvasでは、線や円といった図形を描いたり、色を塗ったりすることは可能ですが、描いた図を動かすことはできません。つまり、Canvasの仕様には、アニメーションのメソッドがありません。もしアニメーションを実現したい場合は、一コマずつ、図を描きなおすという処理を繰り返さなければいけません。

また、Canvasでは、HTML5で文字を表示する機能に関して規定されているものの、2008年7月18日現在では、それに対応するブラウザはありません（Firefoxでは独自メソッドで文字を描画可能です。）。もし文字を表示したい場合、現状では、Canvasではなく、DOMを使って、文字を含んだ要素（DIVなど）を生成し、Canvasで描かれた図に重ねるように座標を指定して表示させる必要があります。

以上のように、Canvasだけで、すべての用途を満たせるわけではありません。複雑な図形描写やアニメーションであれば、Flashに軍配があがるといえます。しかし、CanvasはFlashの代替えではありません。それぞれの特性を理解したうえで、状況に応じた選択をすべきでしょう。