HTML canvas lineTo() メソッド

例

パスを開始する位置 0,0 へ移動し、位置 300,150 へ線を引きます：

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();

Try it Yourself ❯

ブラウザ・サポート

表中の数字は、メソッドを完全にサポートした最初のブラウザ・バージョンを指定しています。

メソッド
lineTo()	Yes	9.0	Yes	Yes	Yes

定義と用法

lineTo() メソッドは、新しいポイントを追加し、キャンバスの最後に指定した位置からそのポイントまでの線を作成します（このメソッドは、線を描画しません）。

チップ: キャンバスに、実際にパスを描画するためには、stroke() メソッドを使用します。

JavaScript 構文：	context.lineTo(x,y);

パラメータの値

パラメータ	説明	Play it
x	線を作成する x 座標	Play it ❯
y	線を作成する y 座標	Play it ❯

その他の例

例

L 字のような形のパスを描画する：

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.stroke();

Try it Yourself ❯

HTML Canvas リファレンス