Metode closePath

Die metode closePath sluit 'n figuur wat met die metode lineTo geteken is, outomaties, deur 'n reguit lyn van die eindpunt na die beginpunt te trek. As die figuur reeds gesluit is of net 'n punt is, doen die metode niks.

Sintaksis

javascriptkonteks.closePath();

Voorbeeld

Kom ons trek eers twee lyne, sonder om hulle via closePath te sluit:

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();

Результат:

Voorbeeld

En nou sluit ons hierdie twee lyne in 'n figuur via closePath, om sodoende 'n driehoek te kry:

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(); // sluit lyne in 'n figuur
ctx.stroke();

Результат:

Voorbeeld

Kom ons trek 'n vierkant, en sluit die figuur met closePath in plaas van die laaste lyn:

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(); // sluit lyne in 'n figuur
ctx.stroke();

Результат:

Sien ook