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

では、四角形以外の描画はどうなっているのか。これは、ちょっとばかり面倒です。四角形以外は、今のように「図形を描くメソッドを呼び出すだけ、以上！」というようにはなっていません。

それ以外の図形は、「パス」というものを使って描画をするのです。コンテキストを取り出すまでは同じですが、それから後はこうなります。

１．パスの作成を開始する。
２．描きたい図形のパスを追加する。
３．パスが完成したら、パスを閉じて作成を終える。
４．スタイルなどを設定し、描画メソッドを呼び出してパスを描く。

つまり、「パスというのを使って図形の形状を作成する」「できあがったら色を設定して描く」というような手順になっているのですね。

では、実際に簡単なサンプルを作成してみましょう。下にscript.jsの例をあげておきます。これは、円を描く簡単なサンプルです。繰り返しを使い、半透明の円を少しずつ位置と大きさを変えながら描きます。

では、ここでのスクリプトを整理していきましょう。

１．パスの作成を開始する

context.beginPath();

パスの開始は「beginPath」で行ないます。これを呼び出すことで、明示的にパスの作成が開始されます。繰り返しなどのように何度もパスを作る場合は、beginPathすると（それまでのパスはクリアされ）新たにパスの作成を開始します。

２．円のパスを追加する

context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);

円のパスは「arc」というメソッドで作ります。これは、引数が多いので注意が必要です。「横位置、縦位置、半径、開始角度、終了角度、描く方向」といった引数を用意する必要があります。

このarcは、実は真ん丸い円を描くためのものではなく、「円弧」を描くためのものなのです。ですから、「どこからどこまでの角度の円弧を描くか」ということも指定しないといけないんですね。それが「開始角度、終了角度」の指定です。角度は、ラジアン（円の１周を２Πとして換算する方式）で指定をします。また「描く方向」は、、開始位置から時計回りの場合はtrue、逆回りの場合はfalseとなります。

３．パスを閉じる

context.closePath();

パスができあがったら、「closePath」でパスを閉じ、パスの作成を終了します。この段階では、まだ（見えない）パスが出来上がっただけで、何も図形は描かれていません。

４．スタイルを設定し、描画をする

context.fillStyle = 'rgba(255, 0, 0, 0.25)';
context.fill();

作成したパスを使って描画をします。スタイルの設定は、先ほどの四角形描画と同様に「fillStyle」「strokeStyle」を利用します。

図形の描画は、「fill」「stroke」というメソッドを使います。これらは、それぞれ作成したパスの図形を「塗りつぶす」「輪郭線だけ描く」という働きをします。既に描く図形の位置や大きさはパスとして用意されてますので、メソッドには非キスなどは不要です。

このように、「パス」というものをいかにして作成するかがCanvasでの図形描画のポイントといってよいでしょう。ここではarcだけ利用しましたが、図形のパスを作るメソッドは他にもいろいろと用意されています。

(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);
	var n = 0;
	for(var i = 0; i < 10; i++) {
		context.beginPath();
		context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
		context.closePath();
		context.fillStyle = 'rgba(255, 0, 0, 0.25)';
		context.fill();
	}	
}