📌  相关文章
📜  HTML |画布 lineWidth 属性(1)

📅  最后修改于: 2023-12-03 15:01:15.693000             🧑  作者: Mango

HTML | 画布 lineWidth 属性
介绍

在 HTML 的 <canvas> 元素中，lineWidth 属性用于设置描边的宽度。描边是指图形轮廓线的绘制，可以通过 lineWidth 属性来控制绘制的线的宽度。

语法

以下是 lineWidth 属性的语法：

context.lineWidth = value;
属性值

属性值为一个数字，表示描边的宽度。默认值为 1。

示例

下面的示例演示了如何使用 lineWidth 属性来绘制带有不同宽度的描边线。

<!DOCTYPE html>
<html>
  <body>
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

    <script>
      var canvas = document.getElementById("myCanvas");
      var context = canvas.getContext("2d");
      
      // 设置描边的宽度为 5
      context.lineWidth = 5;
      
      // 绘制矩形，并设置描边颜色
      context.strokeRect(20, 20, 150, 50);
      
      // 设置描边的宽度为 10
      context.lineWidth = 10;
      
      // 绘制圆形，并设置描边颜色
      context.beginPath();
      context.arc(150, 75, 40, 0, 2 * Math.PI);
      context.stroke();
    </script>
  </body>
</html>
结论

lineWidth 属性被用于设置 <canvas> 元素中绘制描边线的宽度。通过设置不同的宽度值，可以控制描边的粗细程度。这使得程序员可以实现更多样化的图形效果。