CanvasRenderingContext2D：lineWidth 属性

基线广泛可用

此功能已得到完善，可在许多设备和浏览器版本中使用。它自以下时间起在所有浏览器中都可用 2015 年 7 月.

Canvas 2D API 的CanvasRenderingContext2D.lineWidth 属性设置线条的粗细。

注意：可以使用stroke()、strokeRect() 和 strokeText() 方法绘制线条。

值

一个数字，指定线条宽度，以坐标空间单位为单位。零、负数、Infinity 和 NaN 值将被忽略。此值的默认值为 1.0。

示例

更改线条宽度

此示例使用 15 个单位的线条宽度绘制一条线和一个矩形。

HTML

html

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.lineWidth = 15;

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(130, 130);
ctx.rect(40, 40, 70, 70);
ctx.stroke();

结果

规范

规范
HTML 标准 # dom-context-2d-linewidth-dev

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。