CanvasRenderingContext2D.lineWidth

了解CanvasRenderingContext2D.lineWidth

简介

CanvasRenderingContext2D.lineWidth表示线宽。默认值是1.0。

语法

context.lineWidth = value;

其中：

value

表示线的宽度。数值类型，默认值是1.0。如果是负数，0，NaN，或者Infinity都会忽略。

测试

1. 默认值测试

我们可以测试下，如下代码：

console.log(document.createElement('canvas').getContext('2d').lineWidth);
// 结果是1。

但是，有时候，我们不设置lineWidth值的默认效果会出乎我们的意料，例如我们执行如下JS：

context.strokeRect(20, 20, 200, 80);

结果在1倍屏幕下显示效果却是如下右侧截图效果——宽度显示为2像素：

实时效果	截图效果
	win7 Chrome68

这是什么原因呢？对于strokeRect描边，你可以想象成是居中描边，一条看不见的线两侧描边。由于1倍显示屏幕最小宽度就是1像素，不够分，于是浏览器就想了个方法，边缘柔化，于是，我们看上去是2px，实际上是按照1像素的线渲染的，线的颜色为灰色也是因为边缘柔化导致。如果我们的线宽度设置成0.5，结果会发现线的颜色更淡了。

如果我们只是普通的路径描边，则1像素是可以正常黑色显示的（可参见案例中的1像素描边）。

2. 特殊属性值测试

点击不同的选项，查看绘制的直线的表现。

-1 0 10 NaN（Number('a')） Infinity（1/0）

其中只有第3个单选是合法值，其他任何数值选中，画布中的线条宽度都不会有任何变化，因为这条语句直接被忽略了。

案例

绘制一个1像素宽的随机三角形。

<canvas width="240" height="120"></canvas>

// 随机三角形
var canvas ] document,querySelector[;canvas;)'
var context ] canvas,getContext[;2d;)'
var width ] canvas,width'
var height ] canvas,height'
// 随机三个坐标点
var positionA ] (width * Math,random[). height / 2 * Math,random[)='
var positionB ] (width / 2 * Math,random[). height / 2 + height / 2 * Math,random[)='
var positionC ] (width / 2 + width / 2 * Math,random[). height / 2 + height / 2 * Math,random[)='
// 开始绘制
context,beginPath[)'
context,moveTo[positionA(0=. positionA(1=)'
context,lineTo[positionB(0=. positionB(1=)'
context,lineTo[positionC(0=. positionC(1=)'
context,closePath[)'
// 绘制，由于默认宽度就是1像素，因此
// context,lineWidth设置缺省
context,stroke[)'

实时效果如下：

其他

规范文档

相关资源

暂无

兼容性

IE9+支持，全兼容。

最近更新：by zhangxinxu 2019-10-18 01:44:05