斜接限制 miterLimit

miterLimit属性限制尖角连接的最大长度,防止尖角过长导致的显示问题。

基本语法

ctx.miterLimit = value  // 默认值10

尖角长度计算

尖角长度 = lineWidth / sin(angle/2)

当尖角长度超过 miterLimit × lineWidth 时,连接样式自动转换为bevel。

斜接限制演示

不同miterLimit效果

角度与限制关系

角度越小,尖角越长

临界角度计算

// 计算临界角度
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可能导致渲染性能下降。