HTML Canvas - lineCap 屬性

HTML Canvas 的lineCap 屬性（Canvas API）可用於設定在畫布元素內部繪製的線條的端點樣式。

此屬性應在繪製線條之前應用，並且來自CanvasRenderingContext2D 介面。

可能的輸入值

lineCap 屬性接受的值列在下表中。

序號	值和描述	示例影像
1	butt 線條的末端被截平。
2	round 線條的末端被圓化。
3	square 線條的末端被方框化，方框的厚度與線條相同。

示例

以下程式將 HTML Canvas lineCap 屬性的“butt”樣式應用於 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.moveTo(80, 30);
      context.lineTo(80, 120);
      context.lineWidth = 10;
      context.lineCap = 'butt';
      context.stroke();
      context.closePath();
   </script>
</body>
</html>

輸出

上述程式碼在網頁上返回的輸出為：

示例

以下程式將lineCap 屬性的“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.moveTo(80, 30);
      context.lineTo(80, 120);
      context.lineWidth = 10;
      context.lineCap = 'round';
      context.stroke();
      context.closePath();
   </script>
</body>
</html>

輸出

上述程式碼在網頁上返回的輸出為：

示例

以下程式將lineCap 屬性的“square”樣式應用於 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.moveTo(80, 30);
      context.lineTo(80, 120);
      context.lineWidth = 10;
      context.lineCap = 'square';
      context.stroke();
      context.closePath();
   </script>
</body>
</html>

輸出

上述程式碼在網頁上返回的輸出為：

butt 樣式和 square 樣式看起來相似，但可以在“可能的輸入值”表中清楚地觀察到差異。

html_canvas_lines.htm

列印頁面