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' в этой спецификации.
Живой стандарт  

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
closePathChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка

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

Метки документа и участники

Метки: 
Внесли вклад в эту страницу: boxa6
Обновлялась последний раз: boxa6,