HTML |画布 beginPath() 方法

canvas beginPath() 方法用于启动路径或重置当前路径。 moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 和 arc() 方法用于创建路径。此外，stroke() 方法用于在画布上绘制路径。

句法：

context.beginPath();

示例 1：

 
 
  
 
     
        HTML canvas beginPath() Property 
     
 
  
 
      
    
        GeeksforGeeks
     
      
    HTML canvas beginPath() Property 
      
     
      
     
        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();
     
 
  
                    

输出：

示例 2：

 
 
  
 
     
        HTML canvas beginPath() Property 
     
 
  
 
         
    
        GeeksforGeeks
     
         
    HTML canvas beginPath() Property 
      
     
         
     
        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();  
     
 
  
 

支持的浏览器： HTML canvas beginPath() 方法支持的浏览器如下：

• 谷歌浏览器
• 浏览器 9.0
• 火狐
• 苹果浏览器
• 歌剧