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

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

JavaScript

Точки треугольника находятся в координатах (20, 150), (120, 20),и (220, 150).

js
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

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

JavaScript

Первые две дуги создают глаза, последняя создаёт рот.

js
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

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