Manual de referencia HTML

Completo de etiquetas HTML

Método closePath() del canvas HTML

closePath() es el método de Canvas 2Es un método que devuelve el punto de partida del subcamino actual. Intenta dibujar una línea recta desde el punto actual al punto de partida. Si el gráfico ya está cerrado o tiene solo un punto, este método no realiza ninguna operación.

Manual de referencia de canvas HTML

Ejemplo en línea

Dibuje una ruta en forma de la letra L y luego dibuje una línea de regreso al punto de partida:

Ejemplo

!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
Método de uso de closePath() del canvas HTML-Tutoriales básicos(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px sólido #d3d3d3>
Su navegador no admite HTML5　etiqueta 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>

Prueba y observa ‹/›

Compatibilidad del navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9y Firefox, Opera, Chrome y Safari admiten closePath() Método.

Nota:Internet Explorer 8 Las versiones anteriores no admiten el elemento <canvas>.

Definición y uso

El método closePath() crea una ruta desde el punto actual al punto de partida.

Consejo:Usar stroke()El método dibuja efectivamente la ruta en el lienzo.

Consejo:Usar fill() Usar un método para rellenar una imagen (por defecto es negro). Utilice fillStyle Usar propiedades para rellenar otro color/Gradiente.

Sintaxis de JavaScript:	context.closePath();

Ejemplo en línea

Hacer que el azul sea el color de relleno:

Ejemplo

!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
Método de uso de closePath() del canvas HTML-Tutoriales básicos(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px sólido #d3d3d3>
Su navegador no admite HTML5　etiqueta 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>

Prueba y observa ‹/›

Manual de referencia de canvas HTML

HTML: <template> etiqueta