CanvasRenderingContext2D: метод lineTo()

Метод CanvasRenderingContext2D lineTo(), являющийся частью API Canvas 2D, добавляет прямую линию к текущей подтраектории, соединяя последнюю точку подтраектории с заданными координатами (x, y).

Как и другие методы, которые изменяют текущую траекторию, этот метод не отображает ничего напрямую. Для отображения траектории на холсте можно использовать методы fill() или stroke().

x

Координата x конечной точки линии.

y

Координата y конечной точки линии.

None (undefined).

В этом примере показано рисование прямой линии с использованием метода lineTo().

HTML

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

JavaScript

Линия начинается в точке (30, 50) и заканчивается в точке (150, 100).

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

ctx.beginPath(); // Start a new path
ctx.moveTo(30, 50); // Move the pen to (30, 50)
ctx.lineTo(150, 100); // Draw a line to (150, 100)
ctx.stroke(); // Render the path

Результат

Каждый вызов метода lineTo() (и аналогичных методов) автоматически добавляется к текущей подтраектории, что означает, что все линии будут нарисованы или заполнены вместе. В этом примере показано рисование буквы «М» одной непрерывной линией.

HTML

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

JavaScript

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

Результат

• Интерфейс, определяющий этот метод: CanvasRenderingContext2D
• CanvasRenderingContext2D.moveTo()
• CanvasRenderingContext2D.stroke()