HTML canvas lineJoin用法及代码示例

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

用法:

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

属性值：

miter:这是默认样式。此值用于设计尖角。
bevel:此设计用于创建斜角。
round:此设计用于创建圆角。

范例1：本示例说明了斜接linejoin属性。

<!DOCTYPE html> 
<html> 
  
<head>  
    <title>  
        HTML canvas lineJoin property 
    </title>  
</head>  
  
<body style="text-align:center;"> 
      
    <h1 style="color:green">  
        GeeksforGeeks  
    </h1>  
      
    <h2>  
        HTML canvas lineJoin property 
    </h2>  
      
    <canvas id="canvas" width="350" height="380"></canvas> 
      
    <script> 
        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(); 
    </script> 
</body> 
  
</html>

输出：

范例2：本示例说明了斜角linejoin属性。

<!DOCTYPE html> 
<html> 
  
<head>  
    <title>  
        HTML canvas lineJoin property 
    </title>  
</head>  
  
<body style="text-align:center;"> 
      
    <h1 style="color:green">  
        GeeksforGeeks  
    </h1>  
      
    <h2>  
        HTML canvas lineJoin property 
    </h2>  
      
    <canvas id="canvas" width="350" height="380"></canvas> 
      
    <script> 
        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(); 
    </script> 
</body> 
  
</html>

输出：

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

<!DOCTYPE html> 
<html> 
  
<head>  
    <title>  
        HTML canvas lineJoin property 
    </title>  
</head>  
  
<body style="text-align:center;"> 
      
    <h1 style="color:green">  
        GeeksforGeeks  
    </h1>  
      
    <h2>  
        HTML canvas lineJoin property 
    </h2>  
      
    <canvas id="canvas" width="350" height="380"></canvas> 
      
    <script> 
        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(); 
    </script> 
</body> 
  
</html>

输出：

支持的浏览器：下面列出了HTML canvas lineJoin属性支持的浏览器：

谷歌浏览器
Internet Explorer 9.0
火狐浏览器
苹果浏览器
Opera

相关用法

注：本文由纯净天空筛选整理自IshwarGupta大神的英文原创作品 HTML | canvas lineJoin Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。