miterLimit属性限制尖角连接的最大长度,防止尖角过长导致的显示问题。
ctx.miterLimit = value // 默认值10
尖角长度 = lineWidth / sin(angle/2)
当尖角长度超过 miterLimit × lineWidth 时,连接样式自动转换为bevel。
// 计算临界角度
function criticalAngle(miterLimit) {
return 2 * Math.asin(1 / miterLimit) * 180 / Math.PI
}
// miterLimit = 10 时,临界角度约为 11.5°
// 小于此角度会转为bevel
技术图纸
需要精确尖角时,设置较大的miterLimit。
ctx.lineJoin = 'miter'
ctx.miterLimit = 20 // 允许更长的尖角
UI设计
避免尖角过长影响布局,使用默认值或更小值。
ctx.lineJoin = 'miter'
ctx.miterLimit = 5 // 限制尖角长度
安全选择
直接使用round或bevel避免尖角问题。
ctx.lineJoin = 'round' // 或 'bevel'
仅对miter生效
miterLimit只在lineJoin为'miter'时有效。
默认值
默认miterLimit为10,适用于大多数场景。
性能考虑
过大的miterLimit可能导致渲染性能下降。