HTML canvas lineTo()メソッド

Canvas 对象参考手册Canvas オブジェクト

例

パスを開始し、位置 0,0 に移動します。位置 300,150 に到達する線を作成します：

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript：

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

試してみる »

ブラウザサポート

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome、Safari は lineTo() メソッドをサポートしています。

注意：Internet Explorer 8 以前のバージョンは <canvas> 要素をサポートしていません。

定義と使い方

lineTo() メソッドは新しい点を追加し、その点からキャンバス内で最後に指定された点までの線を作成します（このメソッドは線を作成しません）。

ヒント：使用してくださいstroke()メソッドは、キャンバス上に正確なパスを描画します。

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

パラメータ値

パラメータ 説明
x パスのターゲット位置の x 座標。
y パスのターゲット位置の y 座標。

实例

その他の例

例

アルファベットの L の形をしたパスを描画します：

YourbrowserdoesnotsupporttheHTMLcanvastag.

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();

試してみる »

Canvas 对象参考手册Canvas オブジェクト

その他の拡張