Canvasによるグラフィック描画(1) (5/7)
作成:2010-07-15 14:38
更新:2010-07-15 14:39
更新:2010-07-15 14:39
■パスを作らないとどうなる?
ここで、パスについてちょっと面白い実験をしてみましょう。先ほどのサンプルコードから、パスの作成開始と終了の部分を削除してみます。そして実行してみてください。どんなグラフィックが描かれるでしょうか。
やってみるとわかりますが、下の図のように、濃い赤の円が、次第に大きくなりながら薄くなってゆくのがわかります。一体、なぜこんな形になるんでしょうか。
これは、繰返し描かれていく状態を考えてみるとわかってきます。
1回目――1つ目の円が作成され、描かれる。
2回目――2つ目の円が作成される。このとき、パスは終了していないので1つ目の円も残っている。これで描画をすると、2つ目の円が1回目の描画、そして1つ目の円に2度目の描画がされる。
3回目――3つ目の円が作成される。描画をすると、3つ目の円が1回目、2つ目の円が2回目、3つ目の円が3回目の描画がされる。
4回目……以下略……。
わかりますか? パスの作成と終了をしないと、いつまでも作った図形がパスとして残り続けることになります。fillやstrokeで描画をしても、パスは消えないのです。ずっと残り続けます。このため、この例のように「パスを作っては描画」ということを繰り返すと、作った図形が何度も重ね塗りされていくことになります。
このように、パスをしっかり管理しないと、思いもよらぬグラフィックが作成されてしまうことになります。まぁ、これを利用して面白い効果を得ることもできますし、一度作ったパスを何度も利用して描画できるのは、それはそれでいろいろと応用できそうです。が、「どこでパスをスタートし、どこで終了するか」ということをしっかり考えないと変なものを描いてしまう、ということは忘れないようにしましょう。
やってみるとわかりますが、下の図のように、濃い赤の円が、次第に大きくなりながら薄くなってゆくのがわかります。一体、なぜこんな形になるんでしょうか。
これは、繰返し描かれていく状態を考えてみるとわかってきます。
1回目――1つ目の円が作成され、描かれる。
2回目――2つ目の円が作成される。このとき、パスは終了していないので1つ目の円も残っている。これで描画をすると、2つ目の円が1回目の描画、そして1つ目の円に2度目の描画がされる。
3回目――3つ目の円が作成される。描画をすると、3つ目の円が1回目、2つ目の円が2回目、3つ目の円が3回目の描画がされる。
4回目……以下略……。
わかりますか? パスの作成と終了をしないと、いつまでも作った図形がパスとして残り続けることになります。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(); } }
※関連コンテンツ
「JavaScriptによるHTML5プログラミング入門」に戻る