Метод closePath

Метод closePath автоматически замыкает фигуру, нарисованную с помощью метода lineTo, рисуя при этом прямую линию из конечной точки в начальную. Если фигура была уже закрыта или является просто точкой, то метод ничего не делает.

Синтаксис

javascriptконтекст.closePath();

Пример

Для начала нарисуем две линии, не замыкая их через closePath:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.stroke();

Результат:

Пример

А теперь замкнем эти две линии в фигуру через closePath, получив тем самым треугольник:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.closePath(); // замыкаем линии в фигуру
ctx.stroke();

Результат:

Пример

Давайте нарисуем квадратик, вместо последней линии замкнув фигуру через closePath:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath(); // замыкаем линии в фигуру
ctx.stroke();

Результат:

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