サイト内検索

Canvasの使い方

このコーナーでは、Canvasを使うにあたっての事前準備と、簡単な使い方をまとめました。

ExplorerCanvasのダウンロード

Internet ExplorerはCanvasに対応していません。そのため、Googleが提供しているExplorerCanvasというJavaScriptライブラリをダウンロードしましょう。0002

ExplorerCanvasダウンロード

2009/03/24現在、ExplorerCanvasの最新版は Release 3 です。excanvas_r3.zip をダウンロードし解凍すると、excanvas.jsというファイルがあります。実際に使うのは、このファイルのみです。このファイルを、Canvasを使うHTMLファイルと同じ場所に設置しておいてください。

HTMLの準備

Canvasを使うHTMLでは、excanvas.jsをロードするようscript要素をhead要素内に記述しておきます。そして、Canvasを使って図を描きたい場所にcanvas要素を記述しておきます。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="ja" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <title>Canvas</title>
    <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
  </head>
  <body>
    <h1>Canvas</h1>
    <canvas id="canvassample" width="140" height="140"></canvas>
  </body>
</html>

excanvas.jsをロードするscript要素を <!--[if IE]>...<![endif]--> で囲んでいますが、これは、Internet Explorer以外のブラウザではこのscript要素をコメントとしてみなし、Internet Explorerだけが認識できるようにするためのハックです。excanvas.jsはInternet Explorer以外のブラウザでは何も作用しませんので、無駄なロードを避けるためにも、このようなハックを使った方が良いでしょう。もしこのハックを使わずにexcanvas.jsをscript要素でロードしたとしても、Internet Explorer以外のブラウザにおいて問題が発生することはありません。

次に、図を描きたい場所にcanvas要素を記述します。canvas要素はHTML5で新たに規定された要素です。この要素で使える属性は、ボックス領域の幅と高さを表すwidth属性とheight属性のみです。必須の属性ではありませんが、指定しないと、各ブラウザが持っているデフォルト値が適用されます。Firefoxの場合は、300 x 150です。

JavaScriptのフレームワーク

CanvasはJavaScriptを使って図を描きます。次のサンプルでは簡単な正方形を描きます。このサンプルをみながら、Canvasの使い方を見ていきましょう。

四角の線を描くサンプル

onload = function() {
draw();
};
function draw() {
/* canvas要素のノードオブジェクト */
var canvas = document.getElementById('canvassample');
/* canvas要素の存在チェックとCanvas未対応ブラウザの対処 */
if ( ! canvas || ! canvas.getContext ) {
return false;
}
/* 2Dコンテキスト */
var ctx = canvas.getContext('2d');
/* 四角を描く */
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(120, 20);
ctx.lineTo(120, 120);
ctx.lineTo(20, 120);
ctx.closePath();
ctx.stroke();
}

まず、canvas要素のノードオブジェクトを取り出します。このサンプルではDOMのgetElementByIdメソッドを使いましたが、canvas要素を特定できればgetElementByTagNameでも構わないでしょう。

canvas要素のノードオブジェクトを取り出したら、それをチェックしなければいけません。このサンプルでは、canvas要素が存在しなかった場合、そして、canvas要素のノードオブジェクトにgetContextメソッドがセットされていない場合に、つまりCanvasに対応していないブラウザの場合は、処理を終了するようにしてあります。

getContextメソッドは、HTML5で、canvas要素に対して規定された新たにDOMメソッドの一つです。Internet Explorerでは、excanvas.jsによって、あたかもはじめからgetContextメソッドがセットされているかのようにふるまいます。

getContextメソッドは"2D"という引数のみを受け付けます。将来的には"3D"が利用できるのかも知れませんが、現在は"2D"のみとなります。getCotextメソッドから得られた2Dコンテキストのオブジェクトを、ctxに格納します(オブジェクト名は何でも構いません。)。以降、図を描く際には、2Dコンテキストとなるオブジェクトctxを通して命令を記述していきます。

では、次に、実際の図の描き方を見ていきましょう。

  1. 線を描くと宣言します。: ctx.beginPath();
  2. 書き始める場所を指定します。: ctx.moveTo(20, 20);
  3. 引きたい線の終点を指定します。: ctx.lineTo(120, 20);
  4. 引きたい線の終点を指定します。: ctx.lineTo(120, 120);
  5. 引きたい線の終点を指定します。: ctx.lineTo(20, 120);
  6. 描いた線を閉じます。: ctx.closePath();
  7. できた図形を線で描画します。: ctx.stroke();

このように線を描く場合は、上記のステップを繰り返します。

3.~5.で使ったlineToメソッドは、現在の座標から、引数に指定した座標に向けて直線を描くメソッドです。

6.のclosePathメソッドですが、これは描いた図を直線を使って自動的に閉じてくれる便利なメソッドです。closePathメソッドの代わりに ctx.lineTo(20, 20); と記述しても構いませんが、closePathメソッドのほうが、いちいち座標を指定しなくても済む分、コーディングが楽になります。

7.のstrokeメソッドは、これまで描いてきた図形を線で描画するメソッドです。このメソッドを呼び出さない限り、ブラウザ上には表示されません。もし描いた図形を塗りつぶした状態で描画したい場合は、strokeメソッドの代わりにfillメソッドを使い、ctx.fill(); とします。

この例では直線を描くためにlineToメソッドを使いましたが、そのほかにも、矩形を描くrectメソッド、円弧を描くarcメソッド、二次曲線を描くquadraticCurveToメソッド、ベジェ曲線を描くbezierCurveToメソッドなどがあります。詳細はCanvasリファレンスをご覧ください。

座標系

先ほどのサンプルでは、moveToメソッドやlineToメソッドに座標を指定しました。Canvasでは、canvas要素の左上を起点とした座標系を持ちます。<canvas width="400" height="300"> の場合の座標系は図のようになります。

Canvasの座標系

左上の起点から右に向けてx軸、下に向けてy軸をもった座標系となり、左上端の座標は (0, 0) となり、右下端の座標は (400, 300) となります。

Canvasでは線を引くだけではなく、さまざまな図形を描くためのメソッドを用意しています。次のコーナーではCanvasで利用できる図形描画のいくつかをご紹介します。>>さまざまな図形を描く