HTML Canvas - lineJoin 屬性

HTML Canvas 的lineJoin 屬性來自CanvasRenderingContext2D 介面的 Canvas API，可用於設定在連線點連線兩條線段的形狀。

這通常不會影響線條的寬度和長度，因為它不會超出給定的輸入。

可能的輸入值

下表列出了 lineJoin 屬性接受的值。

序號	值和描述	示例圖片
1	round 它將形狀的角圓角化。
2	bevel 在端點之間填充一個三角形，並在另一側填充線段的矩形角。
3	miter 兩條線段的邊緣延伸到它們在一點相遇。這是該屬性的預設值。

示例

以下程式將 HTML Canvas lineJoin 屬性的“round”值樣式應用於 Canvas 元素內的線段。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="200" height="150" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.beginPath();
      context.lineWidth = 15;
      context.lineJoin = 'round';
      context.moveTo(50, 50);
      context.lineTo(100, 100);
      context.lineTo(150, 50);
      context.stroke();
      context.closePath();
   </script>
</body>
</html>

輸出

以上程式碼在網頁上返回的輸出為 -

示例

以下程式將lineJoin 屬性的“bevel”值樣式應用於 Canvas 元素內的線段。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="200" height="150" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.beginPath();
      context.lineWidth = 15;
      context.lineJoin = 'bevel';
      context.moveTo(50, 50);
      context.lineTo(100, 100);
      context.lineTo(150, 50);
      context.stroke();
      context.closePath();
   </script>
</body>
</html>

輸出

以上程式碼在網頁上返回的輸出為 -

示例

以下程式將lineJoin 屬性的“miter”線值樣式應用於 Canvas 元素內繪製的線段。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="200" height="150" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.beginPath();
      context.lineWidth = 15;
      context.lineJoin = 'miter';
      context.moveTo(50, 50);
      context.lineTo(100, 100);
      context.lineTo(150, 50);
      context.stroke();
      context.closePath();
   </script>
</body>
</html>

輸出

以上程式碼在網頁上返回的輸出為 -

html_canvas_lines.htm

列印頁面