JavaScriptで線を引く方法

概要: このチュートリアルでは、Canvas APIを使用して線を引く方法を学習します。

JavaScriptで線を引く手順

キャンバス上に線を引くには、次の手順に従います。

最初に、beginPath()メソッドを呼び出して新しい線を作成します。
次に、moveTo(x, y)を呼び出すことで、線を引かずに描画カーソルを点(x,y)に移動します。
最後に、lineTo(x,y)メソッドを呼び出すことで、前の点から点(x,y)に線を引きます。

線のストロークを設定する

strokeStyleで線をストロークしたい場合は、lineTo(x,y)メソッドを呼び出した後にstroke()メソッドを呼び出すことができます。

線の幅を設定する

線の幅を設定するには、stroke()メソッドを呼び出す前に、2D描画コンテキストのlineWidthプロパティを使用します。

ctx.lineWidth = 10;

lineTo(x,y)メソッド

lineTo(x,y)メソッドは、正と負の両方の引数を受け入れます。

xが正の場合、lineTo(x,y)メソッドは始点から右側に線を引きます。それ以外の場合は、始点から左側に線を引きます。

yが正の場合、lineTo(x,y)メソッドは始点からy軸の下側に線を引きます。それ以外の場合は、始点からy軸の上側に線を引きます。

線の描画例

以下は、キャンバス要素を含むindex.htmlファイルを示しています。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript - Drawing a Line</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <h1>JavaScript - Drawing a Line</h1>

    <canvas id="canvas" height="400" width="500">
    </canvas>
    <script src="js/app.js"></script>

</body>

</html>Code language: HTML, XML (xml)

そして、このapp.jsは、点(100, 100)から(300, 100)まで、赤色で5ピクセルの幅の線を引きます。

function draw() {
    const canvas = document.querySelector('#canvas');

    if (!canvas.getContext) {
        return;
    }
    const ctx = canvas.getContext('2d');

    // set line stroke and line width
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 5;

    // draw a red line
    ctx.beginPath();
    ctx.moveTo(100, 100);
    ctx.lineTo(300, 100);
    ctx.stroke();

}
draw();Code language: JavaScript (javascript)

以下は出力結果を示しています。

線が表示されたキャンバスを示すリンクはこちらです。

再利用可能なdrawLine()関数の開発

次のdrawLine()関数は、指定されたストロークと幅で、ある点から別の点まで線を引きます。

function drawLine(ctx, begin, end, stroke = 'black', width = 1) {
    if (stroke) {
        ctx.strokeStyle = stroke;
    }

    if (width) {
        ctx.lineWidth = width;
    }

    ctx.beginPath();
    ctx.moveTo(...begin);
    ctx.lineTo(...end);
    ctx.stroke();
}
Code language: JavaScript (javascript)

線の色を緑、線の幅を5ピクセルとして、(100,100)から(100,300)に線を引くには、次のようにdrawLine()関数を呼び出します。

const canvas = document.querySelector('#canvas');
if (canvas.getContext) {
    const ctx = canvas.getContext('2d');
    drawLine(ctx, [100, 100], [100, 300], 'green', 5);
}
Code language: JavaScript (javascript)

まとめ

beginPath()、moveTo(x, y)、lineTo(x,y)を使用して線を引きます。
strokeStyleとlineWidthを使用して、線のストロークと線の幅を設定します。

このチュートリアルは役に立ちましたか？