直線を描く[beginPath][moveTo][lineTo][canvas]

パスを利用して直線を描きます。直線を描く一連の流れは以下のようになります。

1. beginPath(); //パスを初期化
2. moveTo(); //サブパスのスタート時点
3. lineTo(); //前の点からの終点を指定
4. stroke(); //描画

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(); //描画
}

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()メソッドで描画をしています。

上記のような閉じていないパスはオープンパスと呼ばれます。逆に閉じたパスをクローズパスと呼びます。

次に上記で描いたパスを連結させてクローズパスとし、その中を緑で塗りつぶしてみます。

デモ画面

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();
}

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()メソッドでパスの内部を塗りつぶしています。

思考の葉

思考の葉

直線を描く[beginPath][moveTo][lineTo][canvas]