了解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 Chrome68截图

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

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

    2. 特殊属性值测试

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

    其中只有第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[)'

    实时效果如下:

    其他

    规范文档

    规范地址 规范状态 备注
    HTML现行标准
    这个规范中定义了'CanvasRenderingContext2D.lineWidth'
    现行标准 -

    相关资源

    暂无

    兼容性

    IE9+支持,全兼容。


    by zhangxinxu 2018-10-15 23:54:34