基本的なメソッドとプロパティ

基本的なメソッドとプロパティ

　それではCanvasで使える基本的なメソッドとプロパティを見ていきましょう。

　まず、メソッドとしてgetContext()メソッドがあります。これはCanvasを使って図形を描画する際の下地づくりとして実行しなければならないメソッドです。このメソッドを実行することにより2DコンテキストのCanvasRenderingContext2Dオブジェクトが生成されます。また、現在は2dという値しか設定できませんが、将来的にはOpenGL ES APIベースの'3d'コンテキストが追加されるようになり、"3d"という値も指定できるようになる予定のようです。

　はじめに、2dコンテキストのオブジェクトから使うことができる代表的なメソッドを紹介します。

　状態に関するメソッドは以下になります。

・save()メソッド…描画状態をスタックへ保存する
・restore()メソッド…保存された描画状態をスタックから取り出す

　パスを描画するためメソッドは以下になります。

・beginPath()メソッド…サブパスの描画を開始する
・moveTo()メソッド…サブパスの描画の初期座標をセットする
・lineTo()メソッド…直線を描画する
・arc()メソッド…中心座標と半径を設定して円弧を描画する
・rect()メソッド…短形を描画する
・stroke()メソッド…ブラウザ上に図形を描画する

　次に、2dコンテキストのオブジェクトから使うことができる代表的なプロパティを紹介します。

・fillStyle…図形内の色やスタイルを設定する
・strokeStyle…図形の輪郭の色やスタイルを設定する
・shadowBlur…図形の周りにぼかしの処理を加える
・font…フォントサイズや種類を設定する

　すべてのメソッド・プロパティの仕様に関しては、WHATWGのサイト（http://www.whatwg.org/specs/web-apps/current-work/#the-2d-context）をご覧ください。

簡単な図形を描いてみる

　それではCanvasで使うメソッドとプロパティを用いて簡単な図形を描いてみましょう。

　まずはじめに簡単な例として、fillRect()メソッドを使って四角形を描画してみます。サンプルファイルはこちらからダウンロードできます（773_1.zip/626 B）。canvas要素のマークアップを行い、そのID名に「rect1」という名前をつけ、DOMを使ったアクセスができるようにしておきます。ダイナミックにcanvasタグ内に図形を描画するので、タグ内には何も記述しません。

　ページ内容の読み込みが完了の際に発生するonloadイベント受けたあと、drawRect()関数が実行されるようにしておきます。

onload = function(){
drawRect();
};

　getContextで2dコンテキストで使えるメソッドのリファレンスを取得し、その返り値をctxという変数に代入します。そして、2dコンテキストのオブジェクトであるctxのbeginPath()メソッドを実行し、パスを初期化したあと、fillRect()メソッドを用いて短形（長方形）を描画します。fillRectメソッドの各パラメータは以下のようになります。

オブジェクト名.fillRect(x座標, y座標, 短形の幅, 短形の高さ)

　実際のソースコードは図2-2になります。

　次に、arc()メソッドを使って円を描画してみましょう。サンプルファイルはこちらからダウンロードできます（773_2.zip/630 B）。

　基本的な処理フローは四角形を描画する場合と同様です。円の場合はarc()メソッドを使います。arc()メソッドの各パラメータは以下のようになります。

オブジェクト名.arc(円の中心のx座標, 円の中心のy座標, 円の半径, 円弧を描き始める角度, 円弧を描き終える角度,真偽値-trueの場合は半時計周りで描画しfalseの場合は時計回りで描画される)

　円を描画するdrawCircl関数のソースコードは図2-3になります。