Méthode closePath()du canevas HTML
Exemple
Dessinez un chemin en forme de lettre L, puis tracez une ligne pour revenir au point de départ :
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();
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();
Essayez-le vous-même »
Prise en charge des navigateurs
Internet Explorer 9, Firefox, Opera, Chrome et Safari prennent en charge la méthode closePath().
Remarque :Internet Explorer 8 et les versions antérieures ne prennent pas en charge l'élément <canvas>.
Définition et utilisation
La méthode closePath() crée un chemin depuis le point actuel jusqu'au point de départ.
Astuce :Utilisez la méthodestroke()pour dessiner le chemin exact sur le canvas.
Astuce :Utilisez la méthodefill()pour remplir l'image (par défaut, en noir). Utilisez la propriétéfillStylepour remplir avec une autre couleur/un dégradé.
| Syntaxe JavaScript : | context.closePath(); |
|---|
Plus d’exemples
Exemple
Utiliser le rouge comme couleur de remplissage :
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();
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();
Essayez-le vous-même »
Référence HTML canvas Autres extensions