CanvasRenderingContext2D.lineTo()

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

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

Синтаксис

ctx.lineTo(x, y);

Параметры

x

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

y

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

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

undefined.

Примеры

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

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

HTML

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

JavaScript

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

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

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

Результаты

Спецификации

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

Поддержка браузерами

BCD tables only load in the browser

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