arcTo 是 Canvas 中绘制圆角连接线段的方法，通过两个切点和半径自动生成相切圆弧；参数 (x1,y1) 为第二条线段上靠近拐点的点，(x2,y2) 为其延伸方向点，radius 为圆弧半径且需 ≥0。
arcTo 是 Canvas 2D API 中用于绘制**圆角连接线段**的关键方法，但它不直接画弧，而是通过两个切线点和一个半径，在两条线段交点处“插入”一段与两者相切的圆弧。它特别适合绘制带统一圆角的多边形、按钮轮廓、流程图连线等——但容易用错，核心在于理解它的几何逻辑。
arcTo 的三个参数到底代表什么？
调用形式：ctx.arcTo(x1, y1, x2, y2, radius)
- (x1, y1)：第二条线段的起点（即“拐角前”的目标点，也是圆弧的切点之一）
- (x2, y2)：第二条线段的终点（即“拐角后”的方向点，圆弧在该方向上与之相切）
- radius：圆弧的半径（非直径），必须 ≥ 0；为 0 时退化为直线连接
⚠️ 注意：它不依赖当前路径终点作为圆心或起点，而是自动计算一个与前一线段、后一线段都相切的圆弧，并将路径终点更新为 (x1, y1) —— 这是新手最常困惑的点。实际绘图前，必须先用 moveTo 或 lineTo 绘制第一条线段的起点和终点（即“进入线段”），arcTo 才能知道“前一线段”的方向。
画一个带圆角的直角折线（基础示例）
目标：从 (50,50) → (150,50) → (150,150)，右下角用 20px 圆角过渡。
立即学习“前端免费学习笔记（深入）”；
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50); // 起点
ctx.lineTo(150, 50); // 第一条线段（水平向右）
ctx.arcTo(150, 150, 150, 150, 20); // 关键：前一线段终点是 (150,50)，此处 (x1,y1)=(150,150) 是拐角点，(x2,y2) 是“延伸方向点”
ctx.lineTo(150, 150); // 补全第二条线段（可选，arcTo 已把终点设为 (150,150)）
ctx.stroke();
✅ 正确理解：
– 前一线段是 (50,50)→(150,50)，方向向右；
– arcTo(150,150,150,150,20) 中，(x1,y1) = (150,150) 是你希望“转过去”的顶点，(x2,y2) 应取该顶点沿第二条线段方向再延伸一点的位置（比如 (150,170) 更稳妥）；
– 更健壮写法：ctx.arcTo(150, 50, 150, 150, 20) 是错的（x1,y1 不能是前一线段终点）；应为：ctx.arcTo(150, 70, 150, 150, 20) —— 其中 (150,70) 是第二条线段上靠近拐点的一个点（非顶点），(150,150) 是其延伸方向。
绘制多段圆角折线（如矩形/多边形）
技巧：循环调用 arcTo，每次提供“下一个顶点”和“再下一个顶点”，并确保起始点已用 moveTo 定位。
const points = [[50,50], [200,50], [200,150], [100,150], [100,100]];
const r = 15;
ctx.beginPath();
ctx.moveTo(...points[0]);
for (let i = 1; i < points.length; i++) {
const curr = points[i];
const next = points[(i + 1) % points.length]; // 闭合时取第0点
ctx.arcTo(curr[0], curr[1], next[0], next[1], r);
}
ctx.closePath();
ctx.stroke();
? 关键细节：
– arcTo 总是基于“当前点 → (x1,y1) → (x2,y2)” 构成夹角；
– 当前点由上一步（moveTo 或前次 arcTo）决定；
– 若某角太尖锐（夹角过小）或半径过大，arcTo 会自动降级为直线（不报错）；
– 想强制圆角，需确保 radius ≤ 夹角对应的最大内切圆半径（粗略判断：半径别超过相邻边长的 1/3）。
替代方案：何时该用 arc() 或贝塞尔曲线？
arcTo 适合“已知顶点+固定半径”的规则圆角；但遇到以下情况，建议换方法：
- 需要精确控制圆弧起止角度 → 用
arc(x, y, r, startAngle, endAngle) - 圆角不对称或需自定义曲率 → 用
quadraticCurveTo(cpx, cpy, x, y)或bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) - 动态生成路径（如 SVG 转 Canvas）→ 先解析出所有顶点和切线方向，再统一用
arcTo或分段贝塞尔拟合
不复杂但容易忽略：arcTo 不是万能圆角工具，它是几何约束解，用对前提才能稳定出效果。
