HTML | Método canvas beginPath()

El método canvas beginPath() se utiliza para iniciar una ruta o restablecer la ruta actual. Los métodos moveTo(), lineTo(), quadricCurveTo(), bezierCurveTo(), arcTo() y arc() se utilizan para crear rutas. Además, el método stroke() se usa para dibujar la ruta en el lienzo.

Sintaxis:

context.beginPath();

Ejemplo 1:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML canvas beginPath() Property 
    </title> 
</head> 
  
<body style="text-align:center;"> 
      
    <h1 style="color:green;">
        GeeksforGeeks
    </h1> 
      
    <h2>HTML canvas beginPath() Property</h2> 
      
    <canvas id="GFG" width="500" height="300"></canvas> 
      
    <script> 
        var GFG = document.getElementById("GFG"); 
        var context = GFG.getContext("2d");
          
        // Create a path
        context.beginPath();
          
        // Set the path width
        context.lineWidth = "8";
          
        // Set the path color
        context.strokeStyle = "green";
          
        context.moveTo(100, 250);
        context.lineTo(150, 50);
        context.lineTo(250, 250);
          
        context.stroke();
          
        context.beginPath();
    </script> 
</body> 
  
</html>                    

Producción:

Ejemplo 2:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML canvas beginPath() Property 
    </title> 
</head> 
  
<body style="text-align:center;"> 
         
    <h1 style="color:green;">
        GeeksforGeeks
    </h1> 
         
    <h2>HTML canvas beginPath() Property</h2> 
      
    <canvas id="GFG" width="500" height="300"></canvas> 
         
    <script> 
        var GFG = document.getElementById("GFG"); 
        var context = GFG.getContext("2d");
          
        // Set the path width
        context.lineWidth = 5;
          
        // Create path
        context.beginPath();
        context.moveTo(100, 20);
        context.lineTo(230, 200);
          
        // Set path color
        context.strokeStyle = 'green';  
        context.stroke();
          
        // Create another path
        context.beginPath();
        context.moveTo(230, 200);  
        context.quadraticCurveTo(230, 200, 260, 100);
          
        // Set path color
        context.strokeStyle = 'blue';  
        context.stroke();  
          
        // Create another path
        context.beginPath();
        context.moveTo(260, 100);    
        context.bezierCurveTo(290, -40, 300, 190, 400, 150);
          
        // Set path color
        context.strokeStyle = 'orange';    
        context.stroke();
        context.closePath();  
   </script>  
</body> 
  
</html> 

Navegadores compatibles: los navegadores compatibles con el método HTML canvas beginPath() se enumeran a continuación:

  • Google Chrome
  • Internet Explorer 9.0
  • Firefox
  • Safari
  • Ópera

Publicación traducida automáticamente

Artículo escrito por IshwarGupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *