前回は、「HTML5＝Flashみたいなリッチなサイトを作ることができる」「HTML4ではユーザーのアテンションを引くような表現は難しかった」など、HTML5によるグラフィックス表現において"ありがちな誤解"について解説しました。

つまるところ、HTML4では実現できない「HTML5ならではのグラフィックス」とはどういったものなのでしょうか。今回は、HTML4ではできなかった表現を実現する、HTML5で注目の機能「canvasタグ」の概要と特徴を紹介します。

ブラウザ機能による画像生成・画像への描画が可能に

canvasタグとは、画像の描画のためのHTML要素です。このcanvasタグによって、ブラウザ機能での画像生成、また生成した画像への描画が可能になりました。

ブラウザ機能での画像生成とは、ブラウザ上でWebページに貼り付けるための画像を生成することです。具体的には、canvasタグはクライアントサイドでjavascriptを用いて画像を生成していきます。これにより、インタラクティブな表現が、ツールやブラウザプラグインなしで実現できるようになりました。

では、canvasタグが登場する前、画像生成はどのように行われていたのでしょう。意外にも知られていませんが、ブラウザ機能での画像生成はブラウザのプラグインなしではできませんでした。HTML5以前に画像生成を行う際は主にFlashが利用されていました。

しかし、iPhoneやiPadに搭載されているブラウザにはFlashプラグインが搭載されてないので、ブラウザ機能を利用した画像生成はcanvasタグを利用するしかなくったというわけです。これからは、canvasタグを利用した画像生成が多く使われるようになると思います。

実際に、canvasタグを使った画像生成を見てみましょう。今回は簡単に、縦横のサイズが100ピクセルの正方形を書くケースを例に説明します。

<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(100, 20);
ctx.lineTo(100, 100);
ctx.lineTo(20, 100);
ctx.closePath();
ctx.stroke();
</javascript>

このようにして、canvasタグによる画像生成をしていきます。

また、canvasタグでつくられた画像は、以前よりも画像操作が容易になりました。Flashのようにユーザーからのアクションに反応して、例えばボールを好きな方向に動かしたり、クリックした場所に物体を表示させたりするなどの描画が可能です。

実際にどのような描画ができるかを見てみましょう。

ソーシャルブロック崩しの画面

つまり、ユーザーからのアクションに反応するようなWebアプリやインタラクションを実現したい時に、HTML5のcanvas機能は有効なのです。

iPhoneなどにはFlashが搭載されていないので、その時に使われるのがcanvasです。本連載では、読者の方がFlashのようなインタラクティブで動的なwebアプリを作ることができるように、canvasタグを重点的に取り上げていくのでお楽しみに。

次回はHTML5からサポートされるようになった、ビデオ再生を可能にしたvideoタグなどのマルチメディア機能を取り上げます。

jAction　佐藤佳文
HTML5によるWebアプリ開発を効率化するJavaScriptライブラリ「jAction」の開発チームでプログラミングを担当。アプリ制作会社で主にFlashやHTML5のコーディングをしている。使用言語は、Flash、HTML5、JavaScript、PHPなど。現在サーバサイド言語のRubyを勉強中。趣味のアプリ制作で、どれか当たってくれないかなと日々願う。