HTML-canvas closePath() Methode
Voorbeeld
Teken een pad in de vorm van de letter L en trek dan een lijn terug naar het beginpunt:
javascript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.closePath();
ctx.stroke();
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de methode volledig ondersteunt.
| Method | |||||
|---|---|---|---|---|---|
| closePath() | Yes | 9.0 | Yes | Yes | Yes |
Definitie en gebruik
De methode closePath() maakt een pad van het huidige punt terug naar het beginpunt.
Tip: gebruik de methode stroke() om het pad daadwerkelijk op het canvas te tekenen.
Tip: Gebruik de methode fill() om de tekening te vullen (zwart is standaard). Gebruik de eigenschap fillStyle om te vullen met een andere kleur/verloop.
| JavaScript-syntaxis: | context .closePath(); |
|---|
Meer voorbeelden
Voorbeeld
Gebruik rood als vulkleur:
javascript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.closePath();
ctx.stroke();
ctx.fillStyle = "red";
ctx.fill();
❮ HTML Canvas-referentie