Canvas .arc方法适配不同X/Y半径的缩放实现问题

云原生阿岚

2026-8-23

修正Canvas椭圆弧函数以匹配指定宽高尺寸

你的现有代码问题在于缩放逻辑错误，导致最终生成的椭圆尺寸和你传入的w、h参数不匹配。以下是修正后的实现：

修正后的代码（`w`为椭圆宽度，`h`为椭圆高度）

function arc(x, y, w, h, start, stop) {
  ctx.save();
  // 将坐标系原点平移至椭圆中心
  ctx.translate(x, y);
  // 缩放坐标系：X轴缩放至宽度的一半（对应椭圆X半径），Y轴缩放至高度的一半（对应椭圆Y半径）
  ctx.scale(w / 2, h / 2);
  // 绘制单位圆的弧，经过缩放后即为目标尺寸的椭圆弧
  ctx.beginPath();
  ctx.arc(0, 0, 1, start, stop);
  // 执行填充和描边
  ctx.fill();
  ctx.stroke();
  // 恢复上下文原有状态
  ctx.restore();
}

关键修正点说明

缩放逻辑调整：
原代码用Math.min(w, h)作为基准圆半径，再用min/max的比例缩放，这会导致最终椭圆尺寸远小于你指定的w和h。正确的做法是基于**单位圆（半径1）**进行缩放：
- X轴缩放因子设为w/2：单位圆X半径1，缩放后变为w/2，椭圆总宽度即为w
- Y轴缩放因子设为h/2：同理，椭圆总高度即为h

参数适配调整：
如果你传入的w和h是X半径和Y半径（而非整体宽高），只需将缩放因子改为w和h即可：

function arc(x, y, xRadius, yRadius, start, stop) {
  ctx.save();
  ctx.translate(x, y);
  ctx.scale(xRadius, yRadius);
  ctx.beginPath();
  ctx.arc(0, 0, 1, start, stop);
  ctx.fill();
  ctx.stroke();
  ctx.restore();
}