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 июль 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 # dom-context-2d-lineto-dev |
Совместимость с браузерами
Loading…
Смотрите также
- Интерфейс, определяющий этот метод:
CanvasRenderingContext2D CanvasRenderingContext2D.moveTo()CanvasRenderingContext2D.stroke()