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

ここで、パスについてちょっと面白い実験をしてみましょう。先ほどのサンプルコードから、パスの作成開始と終了の部分を削除してみます。そして実行してみてください。どんなグラフィックが描かれるでしょうか。

やってみるとわかりますが、下の図のように、濃い赤の円が、次第に大きくなりながら薄くなってゆくのがわかります。一体、なぜこんな形になるんでしょうか。

これは、繰返し描かれていく状態を考えてみるとわかってきます。

１回目――１つ目の円が作成され、描かれる。
２回目――２つ目の円が作成される。このとき、パスは終了していないので１つ目の円も残っている。これで描画をすると、２つ目の円が１回目の描画、そして１つ目の円に２度目の描画がされる。
３回目――３つ目の円が作成される。描画をすると、３つ目の円が１回目、２つ目の円が２回目、３つ目の円が３回目の描画がされる。
４回目……以下略……。

わかりますか？　パスの作成と終了をしないと、いつまでも作った図形がパスとして残り続けることになります。fillやstrokeで描画をしても、パスは消えないのです。ずっと残り続けます。このため、この例のように「パスを作っては描画」ということを繰り返すと、作った図形が何度も重ね塗りされていくことになります。

このように、パスをしっかり管理しないと、思いもよらぬグラフィックが作成されてしまうことになります。まぁ、これを利用して面白い効果を得ることもできますし、一度作ったパスを何度も利用して描画できるのは、それはそれでいろいろと応用できそうです。が、「どこでパスをスタートし、どこで終了するか」ということをしっかり考えないと変なものを描いてしまう、ということは忘れないようにしましょう。

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