Méthode HTML canvas closePath()

Définition et utilisation

closePath() la méthode crée un chemin allant du point actuel au point de départ.

Astuce :Utilisez stroke() la méthode pour dessiner un chemin précis sur le canevas.

Astuce :Utilisez fill() Utilisez la méthode pour remplir une image (par défaut noir). Veuillez utiliser fillStyle Utilisez des attributs pour remplir une autre couleur ou une dégradé.

Exemples

Exemple 1

Tracez un chemin sous forme de lettre L, puis dessinez une ligne pour revenir au point de départ :

Votre navigateur ne prend pas en charge la balise canvas HTML5.

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

Essayez-le vous-même

Astuce :Plus d'exemples sont disponibles en bas de page.

Syntaxe

context.closePath();

Plus d'exemples

Exemple 2

Choisissez vert comme couleur de remplissage :

Votre navigateur ne prend pas en charge la balise canvas HTML5.

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

Essayez-le vous-même

Support du navigateur

Les numéros dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.

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

Remarque :Les versions d'Internet Explorer 8 et antérieures ne prennent pas en charge l'élément <canvas>.