Manuel de référence HTML

Référentiel complet des balises HTML

Méthode closePath() pour canvas HTML

closePath() est une méthode de Canvas 2La méthode D API retourne le point de départ du sous-chemin actuel. Elle essaie de dessiner une ligne droite du point actuel à l'origine. Si le graphique est déjà fermé ou qu'il n'y a qu'un point, cette méthode ne fait aucune opération.

Guide de référence pour HTML canvas

Exemple en ligne

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

Exemple

!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
Méthode d'utilisation de closePath() pour canvas HTML-Tutoriel de base(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solide #d3d3d3>
Votre navigateur ne prend pas en charge HTML5　Balise canvas.
</canvas>
<script>
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();
</script>
</body>
</html>

Vérification de test ‹/›

Compatibilité du navigateur

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome et Safari prennent en charge closePath() Méthode.

Remarque :Internet Explorer 8 et les versions précédentes ne prennent pas en charge l'élément <canvas>.

Définition et utilisation

La méthode closePath() crée un chemin allant du point actuel à l'origine.

Astuce :Utilisez stroke()Méthode pour dessiner effectivement le chemin sur le canevas.

Astuce :Utilisez fill() Méthode pour remplir une image (par défaut noir). Utilisez fillStyle Propriété pour remplir une autre couleur/Dégradé.

Syntaxe JavaScript :	context.closePath();

Exemple en ligne

Prenez le bleu comme couleur de remplissage :

Exemple

!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
Méthode d'utilisation de closePath() pour canvas HTML-Tutoriel de base(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solide #d3d3d3>
Votre navigateur ne prend pas en charge HTML5　Balise canvas.
</canvas>
<script>
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="blue";
ctx.fill();
</script>
</body>
</html>

Vérification de test ‹/›

Guide de référence pour HTML canvas

HTML: Balise <template>