Meetod closePath

Meetod closePath sulgeb automaatselt kujundi, mis on joonistatud meetodiga lineTo, joontes sel viisil sirge joone lõpp-punktist alguspunkti. Kui kujund on juba suletud või on lihtsalt punkt, siis meetod ei tee midagi.

Süntaks

javascriptkontekst.closePath();

Näide

Alustuseks joonistame kaks joont, mitte sulgedes neid läbi 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();

Результат:

Näide

Nüüd aga sulgeme need kaks joont kujundiks läbi closePath, saades seeläbi kolmnurga:

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(); // sulgeme jooned kujundiks
ctx.stroke();

Результат:

Näide

Joonistame ruudu, selle asemel et joonistada viimast joont, sulgedes kujundi läbi 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(); // sulgeme jooned kujundiks
ctx.stroke();

Результат:

Vaata ka