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);
Параметры
Возвращаемое значение
Примеры
Рисование прямых линий
Этот пример рисует прямую линию используя метод 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
Смотрите также
- Интерфейс, определяющий этот метод:
CanvasRenderingContext2D
CanvasRenderingContext2D.moveTo()
CanvasRenderingContext2D.stroke()