CanvasRenderingContext2D.closePath()

Синтаксис

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

Результат

Закрытие пути один раз

Этот пример рисует смайлик, состоящий из трёх не соединённых дуг (под путей).

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

Результат

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

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

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

• Интерфейс, определяющий этот метод: CanvasRenderingContext2D
• CanvasRenderingContext2D.beginPath()