arcto()画圆角矩形出错的根本原因是未正确设置当前路径终点；必须用moveto或lineto定位起点，分四次调用并传相邻边外顶点，半径超限会静默退化为直角，旧版safari需用quadraticcurveto模拟。
Canvas arcTo() 画圆角矩形时总出错？不是缺角就是弧线飞了
根本原因：你没传对「前一条线段的终点」——arcTo() 不接受起点，只认「当前路径终点 + 两个切线点 + 半径」。浏览器会自动连出两条切线再画弧，一旦路径断开或起点错位，弧就飘。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须先用
moveTo(x, y)或上一条lineTo()确保当前终点在矩形左上角（比如moveTo(x, y + r)） - 四个角要分四次调用
arcTo()，每次传入的是「该角相邻两边的外顶点」，不是圆心；例如右上角：传(x + w, y)和(x + w, y + r) - 别忘了最后
closePath()，否则右下角到左下角那条边不会自动闭合 - 半径
r超过边长一半时，arcTo()会静默退化为直角，不报错也不警告
想兼容老版本 Safari？别碰 arcTo()，改用 quadraticCurveTo() 手搓
arcTo() 在 iOS 12.2 之前有严重计算偏差，尤其小半径时弧线塌缩。这时候得绕开它，用二次贝塞尔曲线模拟四分之一圆弧——虽然不是真圆，但视觉几乎无差，且完全可控。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每个圆角用一段
quadraticCurveTo(cx, cy, ex, ey)，其中cx/cy是控制点（取角内侧偏移r * 0.552），ex/ey是终点 - 控制点系数
0.552是标准近似值，硬编码即可，别动态算 - 顺序不能乱：从左上开始，顺时针走，每画完一个角都要更新当前终点，否则下一段曲线起始位置错
- 如果要支持 Canvas2D 的
setLineDash()或阴影，手搓曲线比arcTo()更稳——后者在某些安卓 WebView 里会吃掉虚线
用 roundRect() 最省事？先查浏览器支持度，别默认能用
roundRect() 是 Canvas 2D 新增方法，写法简洁：ctx.roundRect(x, y, w, h, r)，但它在 Chrome 111+、Firefox 112+、Safari 17.4+ 才稳定，旧版 Safari（包括 macOS Monterey）直接报 TypeError: ctx.roundRect is not a function。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 上线前必须检测：
if ('roundRect' in CanvasRenderingContext2D.prototype)，别只看 UA - 服务端渲染或截图场景更危险：Puppeteer 默认用旧版 Chromium，Node-canvas 目前（v2.11）还不支持
roundRect() - 即使支持，
r传数组（如[5,10,15,20]）只在最新 Chrome 有效，Firefox 和 Safari 当前仍只认单数值 - 性能上它确实快，但和手写路径比差异不到 0.1ms，别为这点速度放弃兼容性
圆角矩形要响应鼠标事件？别只靠 isPointInPath()，得重绘路径
isPointInPath() 判断点击是否在圆角矩形内，前提是「当时路径还存在」。如果你画完就清空路径或执行了其他 beginPath()，它永远返回 false。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 交互区域检测必须在同一次路径构建中完成：画完圆角矩形后立刻调用
isPointInPath(x, y)，别等 mouseup 再查 - 如果用了
arcTo()，确保路径未被stroke()或fill()销毁——这两个操作本身不销毁路径，但后续beginPath()会 - 更稳妥的做法是把圆角矩形路径存成
Path2D对象：const path = new Path2D(); path.roundRect?.(…) || manualPath(path); ctx.isPointInPath(path, x, y) - 注意：
Path2D构造函数不支持 IE，但至少比roundRect()兼容范围大一圈
圆角矩形看着简单，真正卡住人的从来不是“怎么画”，而是路径状态管理、浏览器实现差异、还有那个你以为画完了其实早被覆盖掉的当前路径。
