このページの本文へ

JSライブラリの併用でIE対応もOK!

HTML5先取り!CanvasならFlash不要で絵が描ける

2009年05月20日 09時56分更新

藤本 壱

  • この記事をはてなブックマークに追加
本文印刷

 現在主流のHTML 4.01が勧告されたのが1999年12月。その後もWebは進化し続け、HTML+CSS+JavaScript(≒DHTML)でできないことはFlashやSilverlightで補うことで、さまざまな表現が可能になっています。たとえば、ユーザーの操作で画像の位置などが変化するゲームや、刻々と変化するデータを外部が取り込んで図形を描く株式市場の相場グラフはFlashを使うのが一般的ですが、できればHTMLやJavaScriptだけで済ませてしまいたいもの。そこで今回は、HTML5の新機能「Canvas」を使い、Webページ上にJavaScriptで図形を描画する方法を紹介します。


Canvasってナニ?

 2010年の勧告を目指してW3C(World Wide Web Consortium)で策定中のHTML5では、「Canvas」という新しいHTML要素(タグ)が追加される予定です。Canvas は、その名の通り絵(図形)を描くための要素で、JavaScriptを使って以下のような図形をブラウザー上に描画できます。

Canvasで描いたグラフの例
Canvasで描いたグラフの例

 すでに、Firefox/Opera/Safari/Google Chromeでは、Canvasの機能が導入されています。一方、Internet Explorer(IE)には現時点では導入されていませんが、「ExplorerCanvas」というJavaScriptライブラリを併用することで対応可能です(IE6以上が対象)。実質的には現状でも、「大半のWebブラウザーはCanvasに対応している」と言ってもいいでしょう。

 ExplorerCanvasは以下のアドレスからダウンロードできます。

 http://code.google.com/p/explorercanvas/

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング