El método canvas beginPath() se usa para crear una ruta desde el punto actual hasta el punto de inicio. Después de llamar al método closePath(), podemos usar el método stroke() para dibujar la ruta, el método fill() para rellenar la ruta con color negro como valor predeterminado y la propiedad fillStyle para rellenar con otro color, degradado o patrón.
Sintaxis:
context.closePath();
Ejemplo 1: este ejemplo no utiliza el método fill() para completar la ruta de cierre.
<!DOCTYPE html>
<html>
<head>
<title>
HTML canvas closePath() Property
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>HTML canvas closePath() Property</h2>
<canvas id="GFG" width="500" height="300">
</canvas>
<script>
var id_cont = document.getElementById("GFG");
var context = id_cont.getContext("2d");
context.beginPath();
context.moveTo(450, 0);
context.lineTo(120, 200);
context.lineTo(160, 20);
context.closePath();
context.stroke();
</script>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo usa el método fill() para llenar la ruta cerrada.
<!DOCTYPE html>
<html>
<head>
<title>
HTML canvas closePath() Property
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>HTML canvas closePath() Property</h2>
<canvas id="GFG" width="500" height="300">
</canvas>
<script>
var id_cont = document.getElementById("GFG");
var context = id_cont.getContext("2d");
context.beginPath();
context.moveTo(30, 20);
context.lineTo(75, 100);
context.lineTo(100, 150);
context.lineTo(270, 150);
context.closePath();
context.fill();
</script>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con el método canvas beginPath() se enumeran a continuación:
- Google Chrome
- Internet Explorer 9.0
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por IshwarGupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA