lineJoin 属性控制连续路径中线段交汇处的拐角形状，仅支持“miter”（默认尖角，受miterLimit限制）、“round”（圆角，平滑过渡）和“bevel”（斜角，切口状钝角）三种值；需与lineCap协同设置，调试时宜用大线宽和固定路径验证效果。
Canvas 的 lineJoin 属性专门控制两条线段交汇处的拐角形状，不是装饰，而是影响线条连贯性的底层视觉逻辑。它只在连续路径中生效（比如多次 lineTo 或 arcTo），对孤立线段无效。
lineJoin 的三个可选值及视觉表现
它有且仅有三个合法值："miter"（默认尖角）、"round"（圆角）、"bevel"（斜角）。每种都对应不同的几何填充方式：
-
miter：延长两线外边缘直至相交，形成锐利顶点；但受
miterLimit限制，角度过小会自动降级为 bevel - round：以交汇点为圆心、半径为线宽一半画圆弧，平滑过渡；无临界角问题，适合折线图、手绘风路径
- bevel：直接用直线连接两线段外边缘端点，形成切口状钝角；稳定可控，但视觉略显生硬
miter 为什么容易“突然变斜”？
这不是 bug，而是浏览器的保护机制。当两条线夹角很小时（例如折线图中陡升后急转），miter 斜接长度会急剧增长。一旦该长度超过 lineWidth × miterLimit（默认 limit 是 10），浏览器就强制改用 bevel 渲染——于是同一张图里，有些拐角尖锐、有些却突然变斜，破坏一致性。
- 若想保留所有尖角，可适当调高
ctx.miterLimit = 15或更大（但需测试极端角度） - 更稳妥的做法是：明确设
ctx.lineJoin = "round"，彻底避开 miterLimit 判断 - 若必须用 miter 又怕突变，可在绘制前预判夹角，对小于 20° 的连接主动拆分为独立线段并手动补圆弧
lineJoin 和 lineCap 需要协同设置
单独调 lineJoin 很难达到理想效果。比如折线图中，即使拐角用了 round，端点仍是默认 butt，就会出现“圆角拐弯 + 平头收尾”的割裂感。
- 推荐组合：
lineCap = "round"+lineJoin = "round"，整体柔和统一，适合大多数数据可视化场景 - UI 边框类需求可用
lineCap = "square"+lineJoin = "miter"，强调结构感，但要注意坐标偏移（square 会让线段视觉延长半个线宽） - 避免混搭 butt 与 round/bevel，尤其在线宽 ≥2px 时，端点“断口”会明显削弱连接处的圆润效果
实际调试建议
不要靠肉眼猜效果。画一个固定尺寸的测试路径（如 L 形或 Z 形），固定 lineWidth，逐个切换 lineJoin 值观察差异：
- 用大线宽（如 12px）放大差异，更容易识别 bevel 的切口和 round 的弧度
- 在移动端或高缩放下特别注意 miter 的截断行为，真实用户可能看到的是 bevel 而非预期的 miter
- 导出为 PNG 后放大检查锯齿——round 和 bevel 通常抗锯齿更自然，miter 在非整数坐标下易出现像素撕裂
