English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
closePath() è il metodo del Canvas 2D API che riporta il punto della penna al punto di partenza del percorso attuale. Cerca di disegnare una linea retta dal punto corrente al punto di partenza. Se il grafico è già chiuso o c'è solo un punto, questo metodo non esegue alcuna operazione.
Manuale di riferimento per HTML canvas
Disegna un percorso che forma la lettera L e poi traccia una linea di ritorno al punto di partenza:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Guida di base all'uso del metodo closePath() su canvas HTML - Tutorial (oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Il tuo browser non supporta l'etichetta HTML5 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>Prova a vedere ‹/›IEFirefoxOperaChromeSafari
Internet Explorer 9, Firefox, Opera, Chrome e Safari supportano closePath() Metodo.
Attenzione:Internet Explorer 8 e versioni precedenti non supportano l'elemento <canvas>.
Il metodo closePath() crea un percorso che va dal punto corrente al punto di partenza.
Suggerimento:Usa stroke()Metodo per disegnare effettivamente il percorso sul canvas.
Suggerimento:Usa fill() Metodo per riempire un'immagine (predefinito è nero). Usa fillStyle Proprietà per riempire un altro colore/gradiente.
| Sintassi JavaScript: | context.closePath(); |
|---|
Imposta il blu come colore di riempimento:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Guida di base all'uso del metodo closePath() su canvas HTML - Tutorial (oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Il tuo browser non supporta l'etichetta HTML5 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>Prova a vedere ‹/›