CanvasRenderingContext2D: метод closePath()

Метод CanvasRenderingContext2D.closePath() API Canvas 2D пытается добавить прямую линию от текущей точки до начала текущего подпути. Если фигура уже закрыта или имеет только одну точку, эта функция ничего не делает.

Этот метод не рисует ничего на холсте напрямую. Вы можете отобразить путь, используя методы stroke() или fill().

Нет.

Нет (undefined).

В этом примере создаются две первые (диагональные) стороны треугольника с помощью метода lineTo(). После этого основание треугольника создается с помощью метода closePath(), который автоматически соединяет первую и последнюю точки фигуры.

HTML

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

JavaScript

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

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(20, 140); // Move pen to bottom-left corner
ctx.lineTo(120, 10); // Line to top corner
ctx.lineTo(220, 140); // Line to bottom-right corner
ctx.closePath(); // Line to bottom-left corner
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()