Метод closePath
Методът closePath автоматично затваря
фигура, нарисувана с помощта на метод lineTo,
рисувайки при това права линия от крайната точка
до началната. Ако фигурата вече е била затворена
или е просто точка, то методът нищо
не прави.
Синтаксис
контекст.closePath();
Пример
За начало ще нарисуваме две линии, без да ги затваряме
чрез closePath:
<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>
let 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, като по този начин получаваме триъгълник:
<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>
let 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:
<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>
let 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();
:
Вижте също
-
метод
fill,
който запълва фигурата с зададен цвят
