lineJoin属性决定两条线段相交处的连接样式。
ctx.lineJoin = 'miter' | 'round' | 'bevel'
| 值 | 说明 |
|---|---|
| miter | 尖角连接,默认值 |
| round | 圆角连接 |
| bevel | 斜角连接 |
miter连接在角度很小时会产生过长的尖角,需要配合miterLimit使用。
ctx.lineJoin = 'miter'
ctx.miterLimit = 10 // 默认值
// 当尖角长度超过限制时,自动转换为bevel
miter:几何图形、技术图纸
round:柔和曲线、手绘风格、UI元素
bevel:避免尖角过长、现代设计
lineJoin只在线段转角处生效,直线段和曲线段不受影响。