Canvas
Canvasは、ウェブページにJavaScriptを通して図を動的に描くためのテクノロジーです。ここでは、JavaScriptからの使い方ではなく、テクノロジーそのものについて解説します。
Canvasは、以前からFirefox、Opera、Safari、Chromeには実装されていました。そして、現在はまだβ版ですが、Internet Explorer 9でも実装されることになりました。しかし、SVGと呼ばれるテクノロジーもウェブページへの描画を実現します。SVGもInternet Explorer 9に実装され、Canvasと同様、すべてのメジャー・ブラウザで利用することができるようになります。ここでは、これら2つのテクノロジーを比較しながら、Canvasの特徴や使いどころを解説していきます。
描画手段
まずSVGの描画手段は、XMLによるマークアップです。
<svg width="300" height="150"> <circle cx="150" cy="75" r="50" fill="red"/> </svg>
SVGはXMLなので、かつてはHTMLの中に直接埋め込むことはできませんでした。しかし、HTML5では、HTMLの中にsvg
要素を直接埋め込むことが許されました。ブラウザがHTML5のこの規定をサポートすれば、HTMLの中に図が描画されます。実際に、Internet Explorer 9、Firefox 4.0、Chromeはサポートしています。
一方、CanvasはJavaScriptから描画を行います。
<canvas width="300" height="150"></canvas> <script> var canvas = document.querySelector("canvas"); var context = canvas.getContext("2d"); context.fillStyle = "red"; context.beginPath(); context.arc(150, 75, 50, 0, Math.PI*2, true); context.fill(); </script>
このように、canvas
要素をHTMLにマークアップします。JavaScriptでは、canvas
要素のオブジェクトを通して、描画用のメソッドやプロパティを駆使して図を描画します。
前述のSVGとCanvasのサンプルは、いずれも赤色の円を描いています。
このようにSVGとCanvasでは、描画手段が全く異なります。いつ誰が見ても同じ図であれば、Canvasを使う意味はなく、事前に画像ファイルとして用意し、img
要素で表示させるのが妥当と言えます。Canvasは、JavaScriptを使って動的に図を生成するため、見る人によって図を変えるといったケースや、何かしらの操作で動的に図を書き換えるといったケースで使います。
ビットマップとベクター
Canvasの特徴を一言で表すとすれば、ビットマップ・グラフィックスでしょう。一方、SVGはベクター・グラフィックスです。
Canvasは描いてしまった後は、それぞれの図形をブラウザ側から認識することはできません。つまり、描いた後は、もはやimg
要素の画像となんら変わりがないのです。その変わり、描画速度が速いことが特徴に挙げられるでしょう。
一方、SVGは、マークアップ言語ですから、個々の図形はDOMとして認識されています。そのため、描かれた後でも、JavaScriptから個々の図形を操作することが可能です。
ベクター・グラフィックスであるSVGの最も大きな特徴は、やはりスケーリングです。SVGはサイズを固定にして図を描くこともできますが、サイズを固定せずに、伸縮可能にすることができます。
次は、Microsoft社のInternet Explorer Test Driveというサイトで紹介されたデモの1つで、SVGの特徴をうまく活かしたデモです。
ベクター・グラフィックゆえに、拡大しても図の詳細が粗くなることはありません。Canvasの場合、描いてしまった図に対して拡大表示させることはできません。もしCanvasで同じことを実現しようとしたら、拡大や縮小の操作が行われる度に、そのサイズに合わせて図を最初から描き直さなければいけません。
このような図のスケーリングを必要とするシーンでは、Canvasではなく、SVGの採用を検討するのが良いでしょう。