パスを利用して直線を描きます。直線を描く一連の流れは以下のようになります。
1. beginPath(); //パスを初期化
2. moveTo(); //サブパスのスタート時点
3. lineTo(); //前の点からの終点を指定
4. stroke(); //描画
|
1 2 3 4 5 6 7 8 9 10 11 12 |
window.addEventListener('load', draw, false); function draw() { var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); //パスを初期化 ctx.moveTo(250,10); //サブパスのスタート時点 ctx.lineTo(10,400); //前のサブパスからの終点 ctx.lineTo(490,400); ctx.stroke(); //描画 } |
7行目
beginPath()メソッドでパスを初期化しています。
8行目
moveTo()メソッドでパスを開始しています。正確にはパスとは直線や曲線の総称で、点と点を結ぶ直線や曲線を「サブパス」と呼びます。moveTo()メソッドは1つ目のサブパスの起点を指定しています。
9行目
lineTo()メソッドでスタート地点からの終点を指定しています。これで1つ目のサブパスが生成されます。10行目のlineTo()メソッドで2つ目のサブパスが生成されます。
11行目
stroke()メソッドで描画をしています。
上記のような閉じていないパスはオープンパスと呼ばれます。逆に閉じたパスをクローズパスと呼びます。
次に上記で描いたパスを連結させてクローズパスとし、その中を緑で塗りつぶしてみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
window.addEventListener('load', test, false); function test() { var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(250,10); ctx.lineTo(10,400); ctx.lineTo(490,400); ctx.closePath(); //パスを連結して閉じる ctx.stroke(); ctx.fillStyle = 'green'; //緑で内部を塗りつぶす ctx.fill(); } |
11行目
closePath()メソッドでパスを連結させています。最後のサブパスの終点と、最初のサブパスの始点を直線で結びます。
14行目
fill()メソッドでパスの内部を塗りつぶしています。
関連ページ
