了解CanvasRenderingContext2D.miterLimit

    简介

    CanvasRenderingContext2D.miterLimit表示的是当lineJoin类型是miter时候,miter效果生效的限制值。

    什么意思呢?

    也就是“平头”,如果我们的lineJoin属性值是bevel,比方说我有条折线,则效果会是下面这样:,折线的角度非常小

    很OK,没什么问题。但,如果lineJoin属性值是miter,转角表现为尖角,则这个尖角就会很长很长,显然就很难看。如下图:

    因此,才有了miterLimit这个属性,用来限制出现尖角长度范围,如果超出,则平角显示;不超出,则依然尖角。

    语法

    context.miterLimit = value;

    其中:

    value
    表示多大范围内转角表现为miter的宽度。数值类型,默认值是10.0。如果是负数,0,NaN,或者Infinity都会忽略。

    案例

    拖动滑块,感受下不同miterLimit属性值下的实时渲染表现(范围1-10,当前值是10):

    可以看到,所有实际尖角高度(参考线以上或以下)大于miterLimit值的情况下,都表现为了平角。

    其他

    规范文档

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

    相关资源

    暂无

    兼容性

    IE9+支持,全兼容。


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