Метод 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,
који испуњава фигуру задатом бојом
