CanvasRenderingContext2D.closePath()

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

Результат

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

Спецификация Статус Комментарий
HTML Living Standard
Определение 'CanvasRenderingContext2D.closePath' в этой спецификации.
Живой стандарт  

Совместимость с браузерами

BCD tables only load in the browser

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