Metod closePath

Metod closePath automatski zatvara figuru, nacrtanu pomoću metode lineTo, crtajući pri tome pravu liniju od krajnje tačke do početne. Ako je figura već zatvorena ili je samo tačka, onda metod ne čini ništa.

Sintaksa

javascriptkontekst.closePath();

Primer

Za početak nacrtajmo dve linije, ne zatvarajući ih preko 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();

Результат:

Primer

A sada zatvorimo ove dve linije u figuru preko closePath, dobivajući time trougao:

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(); // zatvaramo linije u figuru
ctx.stroke();

Результат:

Primer

Hajde da nacrtamo mali kvadrat, umesto poslednje linije zatvorimo figuru preko 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(); // zatvaramo linije u figuru
ctx.stroke();

Результат:

Pogledajte takođe