Метод 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();

Результат:

Вижте също