The CanvasRenderingContext2D.lineWidth 是 Canvas 2D API 设置线段厚度的属性(即线段的宽度)。

Note:线可以通过stroke()strokeRect(), 和strokeText() 方法绘制。

语法

ctx.lineWidth = value;

选项

value
描述线段宽度的数字。 0、 负数、 InfinityNaN 会被忽略。

示例

改变线宽

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

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

结果

更多示例

有关此属性的更多示例和说明,请参阅在“画布教程”中的使用样式和颜色

规范描述

Specification Status Comment
HTML Living Standard
CanvasRenderingContext2D.lineWidth
Living Standard  

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

  • 在基于 WebKit- 和 Blink- 的浏览器中,除了此属性外,实现了一个不标准的并且不赞成使用的方法 ctx.setLineWidth()

Gecko-specific 注解

  • 从 Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)版本开始, 设置lineWidth 为负数不再抛出异常,所有非正数值都会被忽略。

参见

文档标签和贡献者

标签: 
此页面的贡献者: zhangchen, ice-i-snow
最后编辑者: zhangchen,