Canvasによるグラフィック描画(1) (3/7)

では、「script.js」ファイルを用意しましょう。ここでは、drawという関数を１つだけ用意します。下のリスト欄に、簡単なサンプルを掲載しておきます。

これを実行すると、淡いブルーの背景で塗りつぶされたキャンバス内に、赤い四角形が描かれます（輪郭は青）。これが、スクリプトで描かれた図形です。

Canvasで図形を描く場合、いくつかの手続きを追って処理を行うことになります。それらについてざっと整理していきましょう。

１．<canvas>のDOMオブジェクトを得る
まず最初に、document.getElementByIdなどでDOMオブジェクトを取得します。このオブジェクトに用意されているメソッドなどを呼び出して描画の処理を行うことになります。

２．Contextの取得
<canvas>のDOMオブジェクトには、「コンテキスト」と呼ばれるものが用意されています。これは、図形描画のグラフィックコンテキスト（描画のための諸機能をまとめたオブジェクト）となるものです。このコンテキストは、Canvasオブジェクトの「getContext」メソッドで取得します。これは、引数に"2d"を指定します。「ええっ、それじゃあ3Dとか4Dも……」と思った人。残念ながら、今は"2d"しかないです。

３．フィルとストローク
Canvasの描画を行うとき、まず頭に入れておきたいのは「描画の方式は２つある」という点です。それは「フィル」と「ストローク」です。フィルは、「図形の内部を塗りつぶす方式」です。ストロークは「図形の輪郭線だけを描く（中は塗りつぶさない）方式」です。この２つの方式を組み合わせ、図形を描いていきます。

４．スタイル設定と描画
それぞれの描画は、まず「描くスタイル」を設定し、それから「描くメソッド」を呼び出す、という形で行ないます。描くスタイルって？と思うかも知れませんが、とりあえずは「どの色を使うか」のことだ、と考えてください（それ以外のものもありますが、当座は色の指定ぐらいしか使わないでしょう）。

これらは、フィルとストロークのそれぞれにプロパティとメソッドが用意されています。以下に整理しましょう。

・フィルの場合
fillStyle――スタイルのプロパティ。これに色を設定する。
fillRect――四角形を描くメソッド。引数に描く大きさの情報を渡す。

・ストロークの場合
strokeStyle――スタイルのプロパティ。これに色を設定する。
strokeRect――四角形を描くメソッド。引数に描く大きさの情報を渡す。

５．スタイルと色の指定
描くのに使用する色は、「fillStyle」「strokeStyle」というプロパティとして用意されています。これらに、色を指定してやるわけです。色の値は、普通にスタイルシートで用いられる値です。例えば、"red"とか"blue"といった色の名前、"#FF0000"といた16進数による値がよく用いられます。

また、"rgb(赤,緑,青)"や、"rgba(赤,緑,青,透過度)"といった、rgb/rgbaという関数の指定をテキストとして記述することもできます。

６．大きさの指定
「fillRect」「strokeRect」では、描く四角形の領域を指定します。これは、「横位置、縦位置、横幅、縦幅」の４つの値を引数に指定します。位置は、このCanvasにおける相対的な位置指定になります。

――このように、「getContext」でコンテキストのオブジェクトを取得し、「fillStyle」「strokeStyle」で色を設定し、「fillRect」「strokeRect」で図形を描く、という流れさえ頭に入れれば、簡単な図形を描くのは割と簡単です。

ただし！　これは、あくまで「四角形を描く」という場合に限られます。四角形だけは、Canvasの中で特別に「簡単に描ける」ようになっているのです。それ以外の描画は、もうちょっと複雑です。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

function draw(id) {
	var canvas = document.getElementById(id);
	if (canvas == null)
		return false;

	var context = canvas.getContext('2d');
	context.fillStyle = "#EEEEFF";
	context.fillRect(0, 0, 400, 300);
	context.fillStyle = "red";
	context.strokeStyle = "blue";
	context.fillRect(50,50,100,100);
	context.strokeRect(50,50,100,100);
}