HTML 畫布 - lineWidth 屬性

Canvas 2D API 的 HTML 畫布lineWidth 屬性可用於設定 Canvas 元素中的線段粗細。

此屬性應在使用上下文物件繪製線段之前應用，且可在CanvasRenderingContext2D 介面中使用。

可能的輸入值

它接受指定線段粗細的整數小數值，單位為 Canvas 元素內部繪製的線段寬度。預設情況下，預設值為“1.0”。

示例

以下示例展示了 HTML 畫布lineWidth 屬性，方法是繪製一條未應用lineWidth 屬性的線段和另一條已應用lineWidth 屬性的線段。

<!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(50, 10);
      context.lineTo(50, 110);
      context.stroke();
      context.closePath();
      context.beginPath();
      context.lineWidth = 10;
      context.moveTo(100, 10);
      context.lineTo(100, 110);
      context.stroke();
      context.closePath();
      context.beginPath();
      context.lineWidth = 15;
      context.moveTo(150, 10);
      context.lineTo(150, 110);
      context.stroke();
      context.closePath();
   </script>
</body>
</html>

輸出

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

示例

以下示例展示了透過使用lineWidth 屬性增加邊框粗細來繪製三角形的lineWidth 屬性。

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

輸出

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

示例

以下示例展示了使用lineWidth 屬性繪製對角線，增加了矩形的粗細。

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

輸出

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

html_canvas_lines.htm

列印頁面