CanvasRenderingContext2D.miterLimit

了解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值的情况下，都表现为了平角。

其他

规范文档

相关资源

暂无

兼容性

IE9+支持，全兼容。

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