canvasによるJavaScriptグラフィックス

描画領域の作成

グラフィックスを描画する領域は、<canvas>タグで作成します。

描画処理は、そのcanvasの要素から取得できるCanvasRenderingContext2Dオブジェクトを介して行います。

<canvas id="image-box" width="100" height="100"></canvas>

<script type="text/javascript">

  var canvas = document.getElementById( 'image-box' );

  if( canvas.getContext )
  {
      // canvasから描画用のコンテキストを取得する
      var context = canvas.getContext( '2d' );
  }

</script>

描画

描画はさまざまな形状を連結することで行われ、その一連の操作をパスと呼びます。パスはmoveTo()メソッドで分割することができ、そのように作成されたパスはサブパスと呼ばれます。

作成したパスは、stroke()かfill()を実行することで描画されます。

パス
作用	メソッド
パスの開始	beginPath
サブパスの開始	moveTo
サブパスを閉じる	closePath

描画
形状		メソッド	処理後の現在の位置
直線		lineTo	指定の座標
矩形		rect	座標原点 (0, 0)
円弧	中心点を指定	arc	弧の終了点
円弧	接点を指定	arcTo	弧の終了点
曲線	2次ベジェ曲線	quadraticCurveTo	終了点の座標
曲線	3次ベジェ曲線	bezierCurveTo	終了点の座標

パスを使用しない描画

以下のメソッドはパスに無関係に形状を作成し描画を実行します。
※ JavaScriptの以前のバージョンでは、これらのメソッドの実行後にパスが削除されるようです。

形状	塗りつぶし	メソッド
矩形	なし	strokeRect
矩形	あり	fillRect

テキストの描画

Firefox3.5以降ならば、テキストの描画がサポートされています。
Drawing text using a canvas - MDC

描画
メソッド
strokeText
fillText

計測
メソッド
measureText

描画方法

色やパターンの指定

色の設定などは、現在のパスに対して適用されます。よってパスを作成中に色を変更すると、先に設定した色が新しい色で上書きされることになります。

間違った例

// パスを開始する
context.beginPath();
context.strokeStyle = 'red';  // 赤に設定

context.moveTo( 0, 0 );
context.lineTo( 100, 0 );

context.strokeStyle = 'blue'; // 青に設定
context.lineTo( 200, 0 );

context.stroke(); // 描画の実行

パスの作成中に色を設定し直しているため、後に設定した色ですべて描画されます。
実行結果：[]

正しい例

// パスを開始する
context.beginPath();
context.strokeStyle = 'red';  // 赤に設定

context.moveTo( 0, 0 );
context.lineTo( 100, 0 );

context.stroke(); // 描画の実行

// パスを開始する
context.beginPath();
context.strokeStyle = 'blue'; // 青に設定

context.moveTo( 100, 0 );
context.lineTo( 200, 0 );

context.stroke(); // 描画の実行

色の再設定前に描画を実行し、パスを開始してから新しい色を設定します。
実行結果：[]