HTML＋JavaScriptだけでブラウザに図形描画 - Canvas API -

連載 :

2012年6月26日(火)

Canvas APIは、HTML＋JavaScriptだけで図形を描画するための機能です。従来、ブラウザ上で動的に図形を描画するには、Flashのようなプラグインを利用しなければなりませんでした。しかし、Canvas APIを利用することで、ブラウザ標準の機能だけで同じようなことが実現できます。

今回は、そのCanvas APIを使って、Webページ上に図形を描画するサンプルを解説していきます。サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。

[第2回目次]

TIPS 007：キャンバスを準備する
TIPS 008：キャンバスに四角形を描画する
TIPS 009：キャンバスに直線を描画する
TIPS 010：折れ線を描画する
TIPS 011：多角形を描画する
TIPS 012：ベジェ曲線を描画する
TIPS 013：円／円弧を描画する
TIPS 014：直線から連なる円弧を描画する
TIPS 015：線のスタイルを設定する
TIPS 016：角の形状を設定する
TIPS 017：図形を塗りつぶす

もちろん、Canvas APIは新しい機能なので、まだまだ老舗のFlashには機能面でも生産性でも及ばない点はあまたあります。本格的な開発では、ライブラリなどが充実してくるのを待つべき分野もあるでしょう。また、そもそも対応ブラウザも限定されていますので、無制限にすべてのサイトで利用できるわけではありません。

それでも、Canvas APIはHTML5の中でももっとも注目されている機能のひとつです。今後、ゲームやアニメーションの分野で利用される機会は確実に広がっていくものと予想されます。

表1：Canvas APIの対応バージョン

ブラウザ	対応バージョン
Internet Explorer	9以降
Firefox	1.5以降
Google Chrome	1.0以降
Safari	1.3以降
Opera	9以降

TIPS 007：キャンバスを準備する

Canvas APIを利用するには、まず図形の描画先（＝キャンバス）を準備しておく必要があります。

［リスト1］キャンバスを準備するコード（canvas.html）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML5 TIPS</title>
<!--キャンバスの背景色／枠線を指定（3）-->
<style>
#cv {
  background-color: #FFF;
  border: 1px solid black;
}
</style>
<script>
...中略...
</script>
</head>
<body>
<!--キャンバスの準備（1）-->
<canvas id="cv" width="400" height="300">
  <!--Canvas機能に対応していないブラウザへの備え（2）-->
  Canvas機能に対応したブラウザでアクセスしてください。
</canvas>
</body>
</html>

キャンバスは、

キャンバスのサイズを指定するには、必ずwidth属性（幅）、height属性（高さ）を利用してください（デフォルト値は300×150ピクセル）。

スタイルシートのwidth／heightプロパティを使うと、

（＊）いくらサイズを変更しても、Canvas内部ではwidth／height属性の値に基づいて座標計算されるということです。

（3）は、スタイルシートでキャンバスの枠線や背景色を指定しています。必須ではありませんが、キャンバスにはデフォルトで枠線が付きませんし、背景色は透明です。一般的には、明示的に適切なスタイルを設定しておくのが望ましいでしょう。

TIPS 008：キャンバスに四角形を描画する

［リスト2］キャンバスに四角形を描画するコード（canvas.html）

<script>
window.addEventListener('DOMContentLoaded',
  function() {
    // Canvas APIが利用できるかを判定（1）
    if (HTMLCanvasElement) {
      // コンテキストオブジェクトを取得（2）
      var cv = document.querySelector('#cv');
      var c = cv.getContext('2d');
      // 塗りつぶしの四角、枠線だけの四角を描画（3）
      c.fillRect(20, 20, 150, 200);
      c.strokeRect(10, 10, 200, 150);
    }
  }
);
</script>

図1：キャンバス上に四角形が描画された（クリックで拡大）

Canvas APIは新しい命令なので、利用する前にまず、ブラウザが対応しているかをチェックしなければなりません^(＊)。これを行っているのが（1）です。

HTMLCanvasElementは、

（＊）

Canvas APIを利用できることが確認できたら、続いてコンテキストオブジェクト（以降、コンテキスト）を取得します（(2)の部分）。コンテキストは「文脈」という意味で、キャンバス描画のための座標やスタイル情報を管理すると共に、キャンバスへの描画を担当します。Canvas APIのコアとなるオブジェクトと言っても良いでしょう。

コンテキストを取得するには、

コンテキストを取得できたら、いよいよ図形を描画します。サンプルではCanvas APIの中でももっとも基本的なfillRect／storokeRectメソッドを利用しています（(3)の部分）。fillRectメソッドは塗りつぶした四角を、srokeRectメソッドは枠線のみの四角を、それぞれ描画します。