CanvasRenderingContext2D.lineTo()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

CanvasRenderingContext2DlineTo() はキャンバス 2D API のメソッドで、現在のサブパスに対して、その終点から指定された (x, y) 座標に向けて直線を追加します。

現在のパスを変更するほかのメソッドと同様に、このメソッドは直接は何も描画しません。パスをキャンバス上に描くには、 fill() または stroke() メソッドを使用します。

構文

js
ctx.lineTo(x, y);

引数

x

直線の終点となる x 座標。

y

直線の終点となる y 座標。

返値

直線の描画

この例は、 lineTo() メソッドを使用して直線を描きます。

HTML

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

JavaScript

The line begins at (30, 50) and ends at (150, 100).

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

ctx.beginPath(); // 新しいパスを開始
ctx.moveTo(30, 50); // ペンを (30, 50) へ移動
ctx.lineTo(150, 100); // 直線を (150, 100) へ描く
ctx.stroke(); // パスを描画

結果

連続線の描画

lineTo() (または類似のメソッド)を呼び出すたびに、現在のパスに自動的に追加されます。すなわち、すべての線が描画され、互いに塗りつぶされます。 この例では、一筆書きで 'M' の文字を描画します。

HTML

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

JavaScript

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

ctx.moveTo(90, 130);
ctx.lineTo(95, 25);
ctx.lineTo(150, 80);
ctx.lineTo(205, 25);
ctx.lineTo(210, 130);
ctx.lineWidth = 15;
ctx.stroke();

結果

仕様書

Specification
HTML Standard
# dom-context-2d-lineto-dev

ブラウザーの互換性

BCD tables only load in the browser

関連情報