CanvasRenderingContext2D.lineTo()

Canvas 2D API の CanvasRenderingContext2D.lineTo() メソッドは、直線でサブパスの終点を x と y の座標へ接続します（この線は実際には描画されません）。

void ctx.lineTo(x, y);

x

線の終点の x 座標。

y

線の終点の y 座標。

これは lineTo メソッドを使った実にシンプルなコード断片です。beginPath() を使って直線を描くパスを開始し 、ペンを moveTo() で動かし、そして stroke() メソッドを使って実際に線を描画します。

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(100, 100);
ctx.stroke();

下のコードを編集して、変更が canvas に直に反映されることを確認してください。

• このメソッドを定義しているインターフェイス: CanvasRenderingContext2D
• CanvasRenderingContext2D.moveTo()
• CanvasRenderingContext2D.stroke()