HTML | canvas lineJoin 属性

HTML canvas lineJoin 属性用于设置或返回通过 lineJoin 属性在两条线相交时创建的角的类型。连接类型可以具有以下三种样式之一：斜角、圆形或斜接。但是，连接样式通常具有斜接样式。

句法：

context.lineJoin = "bevel|round|miter";

属性值：

• miter：这是默认样式。该值用于设计尖角。
• 斜角：此设计用于创建斜角。
• 圆形：此设计用于创建圆角。

示例 1：此示例说明了斜接线连接属性。

  
 
     
        HTML canvas lineJoin property
     
 
  

      
     
        GeeksforGeeks 
     
      
     
        HTML canvas lineJoin property
     
      
    
      
    
        var can = document.getElementById("canvas");
        var context = can.getContext("2d");
        context.beginPath();
        context.lineWidth = 20;
        context.lineJoin = "miter";
        context.moveTo(80, 250);
        context.lineTo(150, 50);
        context.lineTo(250, 240);
        context.strokeStyle ="green";
        context.stroke();
    

  
                    

输出：

示例 2：此示例说明了斜角线连接属性。

  
 
     
        HTML canvas lineJoin property
     
 
  

      
     
        GeeksforGeeks 
     
      
     
        HTML canvas lineJoin property
     
      
    
      
    
        var can = document.getElementById("canvas");
        var context = can.getContext("2d");
        context.beginPath();
        context.lineWidth = 20;
        context.lineJoin = "bevel";
        context.moveTo(80, 250);
        context.lineTo(150, 50);
        context.lineTo(250, 240);
        context.strokeStyle ="green";
        context.stroke();
    

  
                    

输出：

示例 3：此示例说明了圆形 linejoin 属性。

  
 
     
        HTML canvas lineJoin property
     
 
  

      
     
        GeeksforGeeks 
     
      
     
        HTML canvas lineJoin property
     
      
    
      
    
        var can = document.getElementById("canvas");
        var context = can.getContext("2d");
        context.beginPath();
        context.lineWidth = 20;
        context.lineJoin = "round";
        context.moveTo(80, 250);
        context.lineTo(150, 50);
        context.lineTo(250, 240);
        context.strokeStyle ="green";
        context.stroke();
    

  
                    

输出：

支持的浏览器： HTML canvas lineJoin 属性支持的浏览器如下：

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