SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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


  • X ポスト
  • このエントリーをはてなブックマークに追加

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の採用を検討するのが良いでしょう。

次のページ
アニメーション

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ここが違う!サンプルで見るHTML5連載記事一覧

もっと読む

この記事の著者

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

有限会社futomi 代表取締役1971年岐阜県生まれ。ホスティングサーバー(共用サーバー)でも利用できるウェブ・アプリケーションの独自開発・販売を手がける。主にPerlによるCGI制作が中心。オーダーメードのウェブ・アプリケーション制作/ウェブ・サーバー管理業務も手がける。2007年にHTML5.JPを開設し、Canvasを使ったJavaScriptライブラリの開発、HTML5の最新情報の発信、HTML5関連仕様の日本語訳を手がける。主な著書に『徹底解説HTML...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5615 2011/01/05 16:46

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング