ブログでHTML5 Canvas パス

線

前回は長方形を色や塗りつぶしました。
今回はもっと基本的なことをやってみましょう。
線を描くのです。

<canvas id="drawLineSegmentCanvas" width="300" height="200"></canvas>
<script>
    (function() {
        var canvas = document.getElementById("drawLineSegmentCanvas");
        var context = canvas.getContext("2d");
        context.beginPath();
        context.moveTo(0, 0);
        context.lineTo(300, 200);
        context.stroke();
    })();
</script>

context.beginPath();

は、線を書く前に呼ぶメソッドです。


context.moveTo(x, y);

は、パスの位置を移動します。
xは移動後のx座標。
yは移動後のy座標です。


context.lineTo(x, y);

は、新たな点を付け加えます。
（このメソッド自体は線を描きません。線のデータを追加するだけです）
xは線の終点のx座標。
yは線の終点のy座標です。


context.stroke();

は、実際に描画を行います。
moveTo()やlineTo()で定義したパスを描くのです。

---

三角形

次のようにすると三角形を描けます。

<canvas id="drawTriangleCanvas" width="300" height="200"></canvas><br />
<script>
    (function() {
        var canvas = document.getElementById("drawTriangleCanvas");
        var context = canvas.getContext("2d");
        context.beginPath();
        context.moveTo(150, 0);
        context.lineTo(300, 200);
        context.lineTo(0, 200);
        context.lineTo(150, 0);
        context.stroke();
    })();
</script>

---

パスを閉じる

<canvas id="drawClosedTriangleCanvas" width="300" height="200"></canvas><br />
<script>
    (function() {
        var canvas = document.getElementById("drawClosedTriangleCanvas");
        var context = canvas.getContext("2d");
        context.beginPath();
        context.moveTo(150, 0);
        context.lineTo(300, 200);
        context.lineTo(0, 200);
        context.closePath();
        context.stroke();
    })();
</script>

context.closePathはパスを閉じます。