画像を使わずに絵を描ける・動かせるcanvas要素

従来、図形や絵を表示したい場合には、画像ファイルを作成して、img要素を使って表示させるくらいしか方法がありませんでした。また、複雑にアニメーションさせたければ、専用ソフトを使ってFlashなどを作成するしかありませんでした。

HTML5で追加されたcanvas要素を使えば、JavaScriptを使って図や絵を描画できます。あらかじめ描く内容をHTMLソース中に記述しておくだけでなく、動的に描画したり、動かしたりもできます。

HTML5のcanvas要素は、以下のような感じで記述します。
   <canvas id="名称" width="横幅" height="高さ">
      <p>canvas非対応ブラウザ向けの表示</p>
   </canvas>
   <script>
      ~描画するスクリプト~
   </script>

この方法で、例えば以下のように描画できます。(Google Chromeでの例)
画像を作らなくても、直接ページ上に絵を描ける

画像を作らなくても、直接ページ上に絵を描ける


上記の例は、以下のHTMLソースを表示させたものです。(以下のソース全体をそのままコピーしてcanvas.htmlなどの名称で保存すれば、HTMLファイルになります。)
<!DOCTYPE html>
<head>
   <title>HTML5 canvas要素のサンプル</title>
</head>
<body>
   <h1>canvas要素のサンプル</h1>

   <canvas id="example" width="200" height="200">
      <p>※このメッセージが見える場合は、HTML5のcanvas要素に対応していません。(ここに代わりの画像などを用意しておきましょう。)</p>
   </canvas>

   <script>
   var example = document.getElementById('example');
   var context = example.getContext('2d');

   // 橙色の四角形(塗りつぶし)を描く
   context.fillStyle = "#ff8000";
   context.fillRect(95, 20, 50, 90);

   // 赤色の円を描く
   context.beginPath();
   context.strokeStyle='#ff0000';
   context.arc(120, 80, 70, 0, Math.PI*2, false);
   context.stroke();

   // 濃い黄色の円を描く
   context.beginPath();
   context.strokeStyle='#808000';
   context.arc(120, 80, 75, 0, Math.PI*2, false);
   context.stroke();

   // 青色の四角形を描く
   context.strokeStyle='#0000ff';
   context.strokeRect(60, 30, 120, 100);

   // 緑色の三角形を描く
   context.beginPath();
   context.strokeStyle='#008000';
   context.moveTo(120, 0);
   context.lineTo(200, 180);
   context.lineTo(40, 180);
   context.closePath();
   context.stroke();
   </script>

</body>
</html>

このように、canvas要素で用意した描画領域(キャンバス)内に、JavaScriptを使って自由に描画ができます。上記では、あらかじめ記述した図形を単純に表示させているだけです。しかし、JavaScriptで描画できるわけですから、状況に応じて動的に描画したり動かしたりするなど、様々な描画が行えます。

本記事はcanvas要素の詳しい解説が目的ではありませんので、具体的な説明は割愛致します。詳細な書き方は、今後に改めてご紹介したいと思います。
※canvas要素は、Firefox、Safariなど多くのブラウザが既に対応しています。ただし、IE8は非対応です(今後にリリースされるIE9では対応されます)。


SVGならJavaScriptを使わずに、もっと簡潔に記述できる

このcanvas要素を使う場合は、(動かす必要もなく、動的に生成する必要もなく)単に描画だけをしたい場合であっても、JavaScriptを使う必要があります。これは少々面倒です。

しかし、SVG(Scalable Vector Graphics)を使えば、HTMLソースだけで描画を完結できます。JavaScriptは必要ないため、ソースも短くて済みます。

次のページでは、HTMLソースだけで図形を描画できるsvg要素をご紹介します。