PR

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

2012年6月26日(火)
山田 祥寛(YAMADA, Yoshihiro)

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>

キャンバスは、要素で定義します((1)の部分)。

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

スタイルシートのwidth/heightプロパティを使うと、要素のwidth/height属性で指定された本来のサイズを拡大/縮小する(*)、という意味になってしまい、あとから座標を計算する場合にも混乱の元になりますので、要注意です。

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

要素配下のテキストは、Canvas機能が利用できない場合に表示されるコンテンツです((2)の部分)。フォールバックテキストとも呼ばれます。サンプルではエラーメッセージを表示しているだけですが、一般的には、Canvasで表すはずだったコンテンツを代替するもの(グラフであれば、その元データなど)を記述しておくと良いでしょう。

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

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

要素の役割は、あくまで描画領域を準備するまでです。実際の図形を描画するには、JavaScriptのCanvas APIを呼び出さなければなりません。Canvas APIを利用したもっとも簡単な例として、キャンバスに四角形を描画してみましょう。

[リスト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は、要素を表すためのオブジェクトです。(1)ではHTMLCanvasElementにアクセスしてみて、アクセスできればCanvas APIに対応していると判断し、以降の処理を行っているわけです(前回にも登場した「機能テスト」です)。

(*)要素のフォールバックテキストは、あくまで要素に対応していない場合の表示を決めるだけで、それに伴うJavaScriptの動作を抑止するものではないのです。

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

コンテキストを取得するには、要素を表すオブジェクトcvからgetContextメソッドを呼び出すだけです。引数の'2d'とは「2次元画像を描画するためのコンテキストを取得しなさい」という意味です。本稿執筆時点では'2d'だけしか指定できませんが、将来的には'3d'のようなオプションが追加されるものと予想されます。

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

[構文]fillRect/storokeRectメソッド

  • fillRect(左上のX座標, 左上のY座標, 幅, 高さ)
  • strokeRect(左上のX座標, 左上のY座標, 幅, 高さ)

座標は、キャンバスの左上の基点(0, 0)とし、それぞれ水平方向がX座標、垂直方向がY座標となります。右、下に行くにつれて、座標は大きくなります。

Think IT会員限定特典
  • Canvas APIを使った複数のHTMLサンプル

著者
山田 祥寛(YAMADA, Yoshihiro)
WINGSプロジェクト

有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表:山田祥寛)。おもな活動は、Web開発分野の書籍/雑誌/Web記事の執筆。ほかに海外記事の翻訳、講演なども幅広く手がける。2011年3月時点での登録メンバは36名で、現在もプロジェクトメンバーを募集中。

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています