Canvas lineWidth 属性
示例
绘制一条 10 像素宽的lineWidth线
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.lineWidth = 10;
// 开始一个新的路径
ctx.beginPath();
ctx.moveTo(0, 100);
ctx.lineTo(200, 100);
// 绘制路径
ctx.stroke();
自己动手试一试 »
更多示例见下文。
描述
lineWidth 属性设置或返回当前线条的宽度（以像素为单位）。
默认值为 1 像素。
另请参阅
strokeStyle 属性 (设置描边颜色/样式)
beginPath() 方法 (开始一个新路径)
moveTo() 方法 （将路径移动到指定点）
lineTo() 方法 （向路径添加一条线）
stroke() 方法 (绘制当前路径)
strokeRect() 方法 (绘制一个矩形)
语法
| context.lineWidth = number |
属性值
| 值 | 描述 | 试一试 |
|---|---|---|
| 数字 | 当前线条的宽度（以像素为单位） | 试一试 » |
示例
绘制一个 10 像素宽的lineWidth矩形
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.lineWidth = 10;
ctx.strokeRect(20, 20, 80, 100);
自己动手试一试 »
浏览器支持
<canvas> 元素是 HTML5 标准（2014）。
lineWidth 在所有现代浏览器中都受支持
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
❮ Canvas 参考
