CodeZine(コードジン)

特集ページ一覧

HTML5で実現できるマルチメディア系機能
ここが違う!サンプルで見るHTML5(4)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2010/12/16 14:00

目次

Canvas

 Canvasは、ウェブページにJavaScriptを通して図を動的に描くためのテクノロジーです。ここでは、JavaScriptからの使い方ではなく、テクノロジーそのものについて解説します。

 Canvasは、以前からFirefox、Opera、Safari、Chromeには実装されていました。そして、現在はまだβ版ですが、Internet Explorer 9でも実装されることになりました。しかし、SVGと呼ばれるテクノロジーもウェブページへの描画を実現します。SVGもInternet Explorer 9に実装され、Canvasと同様、すべてのメジャー・ブラウザで利用することができるようになります。ここでは、これら2つのテクノロジーを比較しながら、Canvasの特徴や使いどころを解説していきます。

描画手段

 まずSVGの描画手段は、XMLによるマークアップです。

SVGのマークアップ例
<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の描画例
<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の採用を検討するのが良いでしょう。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:ここが違う!サンプルで見るHTML5

著者プロフィール

  • 羽田野 太巳(ハタノ フトミ)

    有限会社futomi 代表取締役 1971年岐阜県生まれ。 ホスティングサーバー(共用サーバー)でも利用できるウェブ・アプリケーションの独自開発・販売を手がける。主にPerlによるCGI制作が中心。 オーダーメードのウェブ・アプリケーション制作/ウェブ・サーバー管理業務も手がける。 20...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5