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.

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

Сам метод ничего не рисует, он лишь добавляет подпуть к текущему пути, предоставляя его таким методам, как fill() и stroke(), отрисовывающим сам путь.

Синтаксис

ctx.lineTo(x, y);

Параметры

x

OX значение конца линии.

y

OY значение конца линии.

Возвращаемое значение

undefined.

Примеры

Рисование прямых линий

Этот пример рисует прямую линию используя метод lineTo().

HTML

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

JavaScript

Линия начинается в точке (30, 50), а заканчивается в точке (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
# dom-context-2d-lineto-dev

Совместимость с браузерами

Смотрите также