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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。