CanvasRenderingContext2D: lineWidth 属性

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨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

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 2025 年 9 月 25 日，由 MDN 贡献者进行编辑。

在 GitHub 上查看此页面 • 报告此内容的错误