CanvasRenderingContext2D.closePath()
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.
CanvasRenderingContext2D.closePath()
- метод из Canvas 2D API, добавляет в путь линию от текущей до первоначальной точки под пути и закрывает сам путь (давая возможность инициализировать новый). Если путь пустой или содержит одну точку, этот метод ничего не делает.
Сама функция ничего не рисует. Он лишь позволяет отрисовывать путь таким методам, как stroke()
и fill()
.
Синтаксис
void ctx.closePath();
Примеры
Замкнутый треугольник
В этом примере создаются две первые линии сторон треугольника с использованием метода lineTo()
. После чего метод closePath()
заканчивает рисование треугольника, автоматически соединяя первую и последнюю точки фигуры (в данном случае треугольника).
HTML
<canvas id="canvas"></canvas>
JavaScript
Точки треугольника находятся в координатах (20, 150), (120, 20),и (220, 150).
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 140); // Двигает перо к нижнему левому углу
ctx.lineTo(120, 10); // Рисует линию к верхнему углу
ctx.lineTo(220, 140); // Рисует линию к нижнему правому углу
ctx.closePath(); // Рисует линию к нижнему левому углу
ctx.stroke();
Результат
Закрытие пути один раз
Этот пример рисует смайлик, состоящий из трёх не соединённых дуг (под путей).
Примечание:
Хотя closePath()
вызывается после создания всех дуг, закрывается только последняя.
HTML
<canvas id="canvas"></canvas>
JavaScript
Первые две дуги создают глаза, последняя создаёт рот.
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(240, 20, 40, 0, Math.PI);
ctx.moveTo(100, 20);
ctx.arc(60, 20, 40, 0, Math.PI);
ctx.moveTo(215, 80);
ctx.arc(150, 80, 65, 0, Math.PI);
ctx.closePath();
ctx.lineWidth = 6;
ctx.stroke();
Результат
Спецификации
Specification |
---|
HTML Standard # dom-context-2d-closepath-dev |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Интерфейс, определяющий этот метод:
CanvasRenderingContext2D
CanvasRenderingContext2D.beginPath()