Canvas绘制圆角图形需手动构建路径，核心是用arc()或arcTo()替代直角转折，严格遵循beginPath→moveTo→lineTo/arc/arcTo→closePath四步；arcTo()适合矩形类图形，arc()适用于不规则图形或差异化圆角；多图形需独立beginPath，推荐封装roundRect等函数提升可维护性。
Canvas 本身不提供“一键圆角”功能，所有带圆角的复杂图形都得靠路径（path）手动构建。核心在于用 arc() 或 arcTo() 替代直角转折点，再配合 moveTo()、lineTo() 和 closePath() 组合成完整轮廓。
先理清路径绘制的基本节奏
画任何自定义图形前，必须严格遵循四步： • 调用 ctx.beginPath() —— 清空旧路径，避免叠加 • 用 ctx.moveTo(x, y) 定起点（比如左上角） • 用 lineTo() 连直线，用 arc() 或 arcTo() 替换拐角 • 最后 ctx.closePath() 封口，再 fill() 或 stroke()
圆角关键：arc() 和 arcTo() 怎么选
arcTo() 更适合矩形类图形的圆角：它根据两条切线自动计算圆弧，代码简洁、抗锯齿好，但要求你明确给出“前一线段终点→圆弧起点→圆弧终点”三个点。 arc() 更灵活，适合不规则图形或四角半径不同的情况：你直接指定圆心、半径、起止角度，控制精度高，但需自己算坐标和角度。
例如画一个左上角 8px、右下角 20px 的梯形圆角框，就得拆成 6 段： • moveTo 左上内顶点 • lineTo 右上内顶点 • arc() 绘右上圆角（圆心在右上外角偏移处） • lineTo 右下内顶点 • arc() 绘右下圆角 • lineTo 左下内顶点 • closePath
组合多个圆角图形时注意状态管理
多个图形叠加时，别指望一次 beginPath 管到底： • 每个独立图形开始前都要 beginPath() • 填充/描边后，路径自动清空，但样式状态（fillStyle、lineWidth 等）会保留 • 若需不同样式，提前设置；若需重置，可用 ctx.save() / ctx.restore() • 避免在循环里反复创建对象（如 new Path2D），直接复用 ctx 方法更高效
提升可维护性的实用技巧
把常用圆角结构封装成函数，比如： • roundRect(ctx, x, y, w, h, r) —— 统一圆角矩形 • roundPolygon(ctx, points, radii) —— 多边形各顶点独立设圆角 • 再加个 drawRoundedGroup() 函数，批量调用并统一缩放/平移
这样既避免重复写弧线逻辑，又方便后期调整半径或适配响应式尺寸。
