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
konteks.closePath();
Voorbeeld
Kom ons trek eers twee lyne, sonder om hulle
via closePath te sluit:
<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();
:
Voorbeeld
En nou sluit ons hierdie twee lyne in 'n figuur via
closePath, om sodoende 'n driehoek te kry:
<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(); // 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:
<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(); // sluit lyne in 'n figuur
ctx.stroke();
:
Sien ook
-
metode
fill,
wat die figuur met 'n gegewe kleur vul
