CanvasRenderingContext2D.lineTo()

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

構文

void ctx.lineTo(x, y);

引数

x
線の終点の x 座標。
y
線の終点の y 座標。

lineTo メソッドを使う

これは 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 に直に反映されることを確認してください。

仕様

仕様 状態 コメント
HTML Living Standard
CanvasRenderingContext2D.lineTo の定義
現行の標準  

ブラウザ互換性

BCD tables only load in the browser

参考情報