De closePath-methode
De methode closePath sluit automatisch
een vorm die getekend is met de methode lineTo,
door een rechte lijn te tekenen van het eindpunt
naar het startpunt. Als de vorm al gesloten was
of slechts een enkel punt is, dan doet de methode niets.
Syntaxis
context.closePath();
Voorbeeld
Laten we eerst twee lijnen tekenen zonder ze
te sluiten via 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();
:
Voorbeeld
En laten we nu deze twee lijnen sluiten tot een vorm via
closePath, zodat we een driehoek krijgen:
<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 de lijnen tot een vorm
ctx.stroke();
:
Voorbeeld
Laten we een vierkantje tekenen, waarbij we in plaats van de laatste
lijn de vorm sluiten via 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(); // sluit de lijnen tot een vorm
ctx.stroke();
:
Zie ook
-
de methode
fill,
die de vorm opvult met een opgegeven kleur
