Canvas圆角通过贝塞尔曲线自然过渡实现，而非切角；需拆解转角为可控曲线段，用quadraticCurveTo或bezierCurveTo逼近四分之一圆弧，起点终点距角点r，控制点决定曲率，路径须精准衔接。
Canvas 绘制复杂路径时，圆角衔接不是靠“切掉直角”实现的，而是用贝塞尔曲线自然过渡。关键在于把每个转角拆解成一段可控的曲线段，让相邻边线平滑连接，而不是硬拐弯。
圆角本质是两段切线间的平滑过渡
一个标准圆角矩形的四个角，每个角其实对应一段四分之一圆弧——但 Canvas 没有直接画“带半径的角”的命令。所以得用贝塞尔曲线去逼近这段弧。二次贝塞尔（quadraticCurveTo）适合简单圆角，三次贝塞尔（bezierCurveTo）能更精准拟合，尤其在非正交或不规则多边形中更稳定。
- 起点和终点必须落在原路径的两条邻边上，距离角点等距（即圆角半径 r）
- 控制点位置决定曲率：二次曲线只需一个控制点，常设在角点处；三次曲线两个控制点可分别沿两边方向偏移，更易控制张力
- 每段圆角绘制前，要用 moveTo 定位到起始点，再用贝塞尔指令连接到下一边的起点
手动拼接圆角路径的典型步骤
以绘制一个左上角为圆角的直角路径为例，不是先画矩形再“修角”，而是从头构造路径：
- 调用 beginPath() 清空旧路径
- moveTo(x + r, y) —— 上边起点（避开左上角）
- lineTo(x + w - r, y) —— 画上边剩余部分
- quadraticCurveTo(x + w, y, x + w, y + r) —— 右上角圆角（控制点在角顶）
- lineTo(x + w, y + h - r) —— 画右边剩余部分
- 依此类推，用相同逻辑处理右下、左下、左上角
注意：所有 lineTo 和 quadraticCurveTo 都在同一个路径内连续调用，最后用 closePath() 或显式回到起点闭合。
用 Path2D 复用与组合圆角单元
如果多个图形共享同类圆角结构（比如一组卡片、按钮轮廓），推荐封装成 Path2D 对象：
- 预先创建一个含圆角的 Path2D 实例，例如
const roundedRect = new Path2D(); roundedRect.roundRect(x, y, w, h, r);（HarmonyOS/新版浏览器支持） - 不支持 roundRect 时，手写函数生成 Path2D：内部用 moveTo + lineTo + quadraticCurveTo 构建，并 return 新 Path2D
- 后续绘制时直接 ctx.stroke(roundedRect) 或 ctx.fill(roundedRect)，无需重复写路径逻辑
- 还可对 Path2D 调用 transform 平移、缩放，不影响原始定义
避免常见衔接断裂问题
圆角看起来“断开”或“凸出”，往往不是曲线画错了，而是路径衔接点没对齐：
- 确保每段贝塞尔的终点，和下一段 lineTo 或 moveTo 的起点坐标完全一致（建议用变量存 r，别手敲多次）
- 不要在圆角后立刻 lineTo 到原角点——那会拉出一条多余直线
- 描边时若出现毛边，检查 lineJoin 是否设为 "round"，它能让多段线交汇处自动加圆角，但仅作用于 stroke，不改变路径本身
- 填充时若漏光，说明路径未真正闭合，可用 isPointInPath() 辅助调试某点是否在路径内
