CanvasRenderingContext2D: lineWidth 属性

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

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

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

一个指定线宽的数值,单位为坐标空间单位。零、负值、InfinityNaN 值将被忽略。此值默认为 1.0

示例

更改线宽

此示例绘制了一条线和一个矩形,线宽为 15 个单位。

HTML

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

JavaScript

js
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();

结果

更多示例

有关此属性的更多示例和说明,请参阅 Canvas 教程中的应用样式和颜色

规范

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

浏览器兼容性

另见