JavaScript Canvas绘制圆与圆弧的路径控制算法

缩略图概览：Canvas 2D 圆弧路径控制模型全景与核心机制分类

一、Canvas 路径模型与 arc() 极坐标路径生成机理

原生 CanvasRenderingContext2D.prototype.arc() 方法是绘制圆与圆弧最常用的接口。其方法签名接收六个参数：

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

尽管参数直观，但其内部的路径控制逻辑存在两项关键机制，直接决定了最终绘制的几何轮廓：

1. 屏幕坐标系下的极坐标映射

Canvas 的二维坐标原点 (0, 0) 位于画布左上角，水平向右为 +X 轴，垂直向下为 +Y 轴。这一几何翻转导致其角位移方向与传统笛卡尔数学坐标系相反：

• 0 弧度（0 rad）：位于圆心水平向右（时钟 3 点钟方向）。
• π/2 弧度：位于圆心正下方（时钟 6 点钟方向）。
• π 弧度：位于圆心水平向左（时钟 9 点钟方向）。
• 3π/2 弧度：位于圆心正上方（时钟 12 点钟方向）。

参数 anticlockwise 默认为 false（即顺时针扫描）。当设置为 true 时，引擎会沿逆时针方向从 startAngle 扫描到 endAngle。若起止弧度相同，顺逆时针标志将决定是绘制零长度路径还是绘制完整正圆。

2. 子路径状态机与隐式 lineTo 机制

Canvas 上下文维护着一个连续的“子路径列表”（Subpaths）。在调用 arc() 时，底层路径引擎会执行严格的状态转移判断：

• 子路径为空时：若此前刚调用过 ctx.beginPath() 且未添加任何点，引擎会自动将当前笔触隐式移动到圆弧的起始点 (x + radius * cos(startAngle), y + radius * sin(startAngle))，随后开始生成弧线。
• 子路径非空时：若此前已有路径点（例如执行过 moveTo、lineTo 或上一个图形未重置），arc() 绝不会凭空瞬移，而是会强制在当前落笔点与圆弧起始点之间，自动追加一条直线段（相当于隐式执行了一次 lineTo）！

这就是许多初学者在绘制多个独立圆或饼图切片时，画布上莫名出现一条横跨屏幕的放射状线条的根本原因。解决该问题的控制准则是：要么在绘制新圆弧前显式调用 ctx.beginPath() 清空子路径列表；要么显式调用 ctx.moveTo() 将笔触定向至该圆弧的数学起点。

图 1：Canvas arc() 极坐标参数化与隐式子路径连线状态机

二、基于双切线的 arcTo() 几何倒角算法

原生 arcTo() 方法常用于在两条相交线段之间生成光滑过渡的圆弧（即工程制图中的倒角 Fillet）。与 arc() 的极坐标定心不同，arcTo() 依赖几何相切导向，其接口定义如下：

ctx.arcTo(x1, y1, x2, y2, radius);

该方法需要三个点共同确定几何关系：路径当前点 P0(x0, y0)、拐角控制点 P1(x1, y1)，以及导向终点 P2(x2, y2)。

1. 切点与圆心的数学推导

设射线 P1 -> P0 为切线 1，射线 P1 -> P2 为切线 2。两条射线的夹角为 α。 为了使半径为 r 的圆同时与这两条射线相切，切点距离拐角顶角 P1 的切线长度 d 满足：

两个切点分别为切线 1 上的 T1 与切线 2 上的 T2：

2. 路径控制执行的四个步骤

1. 连线至首切点：如果当前笔触 P0 不在 T1 处，引擎会自动生成一条从 P0 到 T1 的直线段。若 P0 与 T1 重合，则省略该线段。
2. 扫描圆弧：沿着以内切圆心为基准的圆周，在 T1 到 T2 之间绘制圆弧，弧长严格小于半圆（优弧与劣弧中固定取劣弧）。
3. 落笔点锁定：特别注意，调用结束后，笔触停留在切点 T2，而不是参数传入的导向点 P2！如果后续需要连线至 P2，必须显式调用 ctx.lineTo(x2, y2)。
4. 边界退化处理：若 P0, P1, P2 三点共线，或者半径 radius <= 0，圆弧退化，arcTo() 将直接表现为一条连接到 P1 的纯直线段。

图 2：arcTo(x1, y1, x2, y2, r) 双切线几何推导与四步执行流程

3. 通用圆角多边形路径算法实现

利用 arcTo() 的特性，我们可以编写一套通用的闭合圆角多边形绘制算法。无论顶点为矩形、五角星还是任意凹凸多边形，只要依次遍历顶点并以相邻点作为导向，即可生成完全连续的平滑闭合轮廓：

/**
 * 绘制任意圆角多边形闭合路径
 * @param {CanvasRenderingContext2D} ctx 
 * @param {Array<{x: number, y: number}>} points 顶点数组
 * @param {number} radius 圆角半径
 */
function drawRoundedPolygon(ctx, points, radius) {
  const len = points.length;
  if (len < 3) return;

  ctx.beginPath();
  // 取最后一条边的中点作为起始落笔点，避免拐角处产生接缝伪影
  const startX = (points[len - 1].x + points[0].x) / 2;
  const startY = (points[len - 1].y + points[0].y) / 2;
  ctx.moveTo(startX, startY);

  for (let i = 0; i < len; i++) {
    const p1 = points[i];
    const p2 = points[(i + 1) % len];
    ctx.arcTo(p1.x, p1.y, p2.x, p2.y, radius);
  }

  ctx.closePath();
}

三、复合闭合图形的路径拓扑控制（扇形与圆环切片）

在统计图表（饼图、环形仪表盘）开发中，单个圆弧不足以构成闭合面，必须结合直线与次级圆弧实现拓扑封闭。

1. 饼图扇形（Sector）的路径拓扑

扇形的闭合拓扑链条为：圆心 -> 外圆弧起点 -> 外圆弧终点 -> 闭合回圆心。

function drawSector(ctx, cx, cy, r, startAngle, endAngle) {
  ctx.beginPath();
  ctx.moveTo(cx, cy); // 1. 将笔触定位到圆心
  ctx.arc(cx, cy, r, startAngle, endAngle, false); // 2. 自动产生圆心到弧起点的半径连线，并扫描外弧
  ctx.closePath(); // 3. 自动连接弧终点到圆心，形成几何闭合
}

2. 圆环切片（Donut Sector）的拓扑连续性控制

圆环切片包含外弧与内弧。为了使整个环形切片在一次绘制调用中完成填充和描边，且不产生多余的割线，必须采用同向顺逆反转的路径控制策略：

1. 在外弧起点落笔：moveTo(cx + R * cos(start), cy + R * sin(start))
2. 顺时针扫描外弧至 endAngle：arc(cx, cy, R, start, end, false)
3. 绘制径向线段到达内弧终点：lineTo(cx + r * cos(end), cy + r * sin(end))
4. 逆时针扫描内弧回 startAngle：arc(cx, cy, r, end, start, true)
5. 调用 closePath() 闭合回外弧起点。

function drawDonutSector(ctx, cx, cy, innerR, outerR, startAngle, endAngle) {
  ctx.beginPath();
  // 1. 定位到外弧起点
  const x0 = cx + outerR * Math.cos(startAngle);
  const y0 = cy + outerR * Math.sin(startAngle);
  ctx.moveTo(x0, y0);

  // 2. 顺时针绘制外弧
  ctx.arc(cx, cy, outerR, startAngle, endAngle, false);

  // 3. 逆时针绘制内弧 (注意起止角度颠倒，或 anticlockwise 设为 true)
  ctx.arc(cx, cy, innerR, endAngle, startAngle, true);

  // 4. 封闭路径
  ctx.closePath();
}

四、三次贝塞尔多项式逼近圆弧的高级控制算法

在图形变形（Morphing）、SVG 路径转换以及需要对曲线进行连续曲率调整的高级场景下，原生 arc() 无法与贝塞尔路径混合变形。此时需要使用 ctx.bezierCurveTo() 来逼近圆弧。

1. 四分之一圆拟合系数 κ 的严格推导

三次贝塞尔曲线由起点 P0、两个控制点 P1, P2 和终点 P3 决定。考虑在第一象限内半径为 r 的四分之一圆（圆心在原点）：

• 起点：P0 = (r, 0)，切线垂直向上，故控制点 1 设为 P1 = (r, κ · r)。
• 终点：P3 = (0, r)，切线水平向左，故控制点 2 设为 P2 = (κ · r, r)。

三次贝塞尔参数方程为：

在曲线对称中点 t = 0.5 处，计算横纵坐标：

为了使中点精确落在圆周上（即圆周 45° 处的坐标 (r · cos(π/4), r · sin(π/4)) = (r · √2 / 2, r · √2 / 2)），令：

该系数 κ ≈ 0.55228475 使得单段三次贝塞尔逼近四分之一圆时的最大径向相对误差小于 0.027%，在绝大多数屏幕光栅化场景下完全无法用肉眼察觉。

图 3：三次贝塞尔曲线拟合圆弧控制算法与参数 κ 推导

2. 任意角度 α 的控制柄长通用公式与分段细分算法

对于任意圆心角 α (α <= π/2)，控制手柄在切线方向上的位移标量 L 满足通用三角公式：

若圆弧跨度超过 90° (π/2)，三次贝塞尔的误差会急剧上升。工程控制算法必须对大角度圆弧进行自适应细分（Subdivision）：将其切分为 N = Math.ceil(Δθ / (π/2)) 段微元弧，依次调用 bezierCurveTo 衔接，保证接缝处的 $C^1$ 连续性。

/**
 * 三次贝塞尔参数化逼近任意圆弧
 */
function drawBezierArc(ctx, cx, cy, r, startAngle, endAngle) {
  const sweep = endAngle - startAngle;
  const segments = Math.max(1, Math.ceil(Math.abs(sweep) / (Math.PI / 2)));
  const step = sweep / segments;

  let currentAngle = startAngle;
  let currentX = cx + r * Math.cos(currentAngle);
  let currentY = cy + r * Math.sin(currentAngle);

  // 移动至起始点
  ctx.moveTo(currentX, currentY);

  for (let i = 0; i < segments; i++) {
    const nextAngle = currentAngle + step;
    const halfStep = step / 2;
    // 计算切向手柄标量长度
    const handleLen = (4 / 3) * Math.tan(step / 4) * r;

    // 起点处的手柄控制点 CP1
    const cp1x = currentX - handleLen * Math.sin(currentAngle);
    const cp1y = currentY + handleLen * Math.cos(currentAngle);

    // 终点坐标及终点处的手柄控制点 CP2
    const nextX = cx + r * Math.cos(nextAngle);
    const nextY = cy + r * Math.sin(nextAngle);
    const cp2x = nextX + handleLen * Math.sin(nextAngle);
    const cp2y = nextY - handleLen * Math.cos(nextAngle);

    ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, nextX, nextY);

    currentAngle = nextAngle;
    currentX = nextX;
    currentY = nextY;
  }
}

五、弧长参数化、切线计算与沿弧动画控制

在动态加载环、运动粒子循迹等交互场景中，我们往往需要根据归一化进度参数 t ∈ [0, 1] 来控制圆弧的生长或在弧线上定位物体的姿态角。

1. 任意进度点与瞬时切向量

当参数 t 随时间线性或通过缓动函数（Easing）变化时：

弧线上物体的实时物理坐标 P(t) 及切线单位方向向量 T(t) 为：

2. 虚线偏移量（strokeDashoffset）实现的平滑进度弧控制

在不重绘路径的情况下，控制圆环进度条的最优性能方案是保持完整圆路径不变，利用 setLineDash 和 lineDashOffset 实现 GPU 加速动画：

function renderProgressRing(ctx, cx, cy, r, progress) {
  const circumference = 2 * Math.PI * r; // 圆周总长度
  const strokeOffset = circumference * (1 - Math.min(Math.max(progress, 0), 1));

  ctx.save();
  ctx.beginPath();
  // 旋转画布使 0 点位于正上方 (12 点钟方向)
  ctx.arc(cx, cy, r, -Math.PI / 2, Math.PI * 1.5, false);
  ctx.strokeStyle = "#B96555";
  ctx.lineWidth = 8;
  ctx.lineCap = "round";

  // 设置虚线阵列为整周长度，通过 offset 显隐
  ctx.setLineDash([circumference, circumference]);
  ctx.lineDashOffset = strokeOffset;
  ctx.stroke();
  ctx.restore();
}

图 4：Canvas 圆与圆弧路径控制策略决策与场景对比

六、工程排查与避坑准则清单

在实际生产开发中，圆弧路径控制常常因为细节疏漏导致渲染性能下降或渲染畸变。以下是四个必须排查的核心准则：

七、总结

在 Canvas 2D 图形学开发中，掌握圆与圆弧的路径控制不仅是记住几个参数，更在于透彻理解路径引擎在子路径转移时的底层行为准则：

• 使用 arc() 时，重点管理极坐标方向映射与前序路径连线隔离，它是扇形、圆环及基本几何构件的首选。
• 使用 arcTo() 时，牢记其落笔于第二切点 T2 而非控制终点，充分利用双切线几何构造自适应的平滑圆角轮廓。
• 处理复杂形状变形与高精曲线融合时，引入以 κ ≈ 0.5523 为基准的三次贝塞尔多项式拟合算法，并在跨度大于 90° 时实施切片细分，从而兼顾视觉平滑度与数学解析精度。