Canvas closePath() methode

Canvas Reference Manual

Definitie en gebruik

closePath() methode om een pad te maken van de huidige naar de beginpunt.

Tip:Gebruik stroke() methode om een exact pad op het canvas te tekenen.

Tip:Gebruik fill() Gebruik de methode om een afbeelding te vullen (standaard is zwart). Gebruik fillStyle Eigenschappen om een andere kleur of verloop te vullen.

Voorbeeld

Voorbeeld 1

Teken een pad in de vorm van een letter L en trek lijnen om terug te keren naar het beginpunt:

Uw browser ondersteunt de HTML5 canvas tag niet.

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

Probeer het zelf

Tip:Meer voorbeelden worden aangeboden aan de onderkant van de pagina.

Syntaxis

context.closePath();

Meer voorbeelden

Voorbeeld 2

Maak groen de kleur voor het vullen:

Uw browser ondersteunt de HTML5 canvas tag niet.

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="green";
ctx.fill();

Probeer het zelf

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

Canvas Reference Manual