看起来你遇到的问题是用矩形渐变擦除圆弧端点时，留下了和圆弧曲率不匹配的直边接缝——毕竟矩形的边缘是硬直的，哪怕对齐了切线方向，也没法完美贴合圆弧的弧形轮廓。咱们可以换个思路，用平滑的弧形羽化擦除来替代矩形擦除，这样就能和参考图的自然渐变边缘完全匹配了。

核心问题分析 #

你当前的eraseFeather函数用了矩形线性渐变来擦除butt端点的突出部分，矩形的直边和圆弧的弧形天生不兼容，这就是直边接缝的来源。我们需要把擦除区域的边缘改成弧形，让它顺着原圆弧的轮廓自然过渡。

解决方案1：通用圆形羽化擦除（推荐，实现简单） #

这种方法用圆形径向渐变替代矩形渐变，擦除区域的边缘是平滑的弧形，适配绝大多数场景：

function drawFancyArcFrame(mainCtx, opts) {
  const { cx, cy, radius, width, startDeg, sweepDeg, color1, color2, capStyle = 'feather', capLengthPx = 24, pixelSize = 4 } = opts;
  if (sweepDeg <= 0 || width <= 0) return;

  const startRad = (startDeg * Math.PI) / 180;
  const endRad = ((startDeg + sweepDeg) * Math.PI) / 180;
  const W = mainCtx.canvas.width;
  const H = mainCtx.canvas.height;

  const off = document.createElement('canvas');
  off.width = W;
  off.height = H;
  const ctx = off.getContext('2d');

  const grad = ctx.createLinearGradient(0, 0, W, H);
  grad.addColorStop(0, color1);
  grad.addColorStop(1, color2);

  // 绘制基础圆弧（保留原逻辑）
  ctx.save();
  ctx.strokeStyle = grad;
  ctx.lineWidth = width;
  ctx.lineCap = 'butt';
  ctx.globalAlpha = 0.85;
  ctx.beginPath();
  ctx.arc(cx, cy, radius, startRad, endRad, false);
  ctx.stroke();
  ctx.restore();

  // 计算端点和切线（保留原逻辑）
  const sx = cx + radius * Math.cos(startRad);
  const sy = cy + radius * Math.sin(startRad);
  const ex = cx + radius * Math.cos(endRad);
  const ey = cy + radius * Math.sin(endRad);
  const tStart = startRad + Math.PI / 2;
  const tEnd = endRad + Math.PI / 2;

  // 👇 重点修改：替换原eraseFeather函数
  const eraseFeather = (x, y) => {
    ctx.save();
    ctx.globalCompositeOperation = 'destination-out';
    // 创建圆形径向渐变：中心完全擦除→边缘逐渐透明
    const eraseRadius = width / 2 + capLengthPx;
    const grad = ctx.createRadialGradient(0, 0, 0, 0, 0, eraseRadius);
    grad.addColorStop(0, 'rgba(0,0,0,1)');       // 端点中心完全擦除（去掉butt的直边）
    grad.addColorStop(width/(2*eraseRadius), 'rgba(0,0,0,1)'); // 线宽范围内完全擦除
    grad.addColorStop(1, 'rgba(0,0,0,0)');       // 羽化边缘完全不擦除
    // 以端点为中心画圆形渐变擦除区域
    ctx.translate(x, y);
    ctx.fillStyle = grad;
    ctx.beginPath();
    ctx.arc(0, 0, eraseRadius, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
  };

  // 其余eraseChop、erasePixel函数保留原逻辑
  const eraseChop = (x, y, ang) => {
    ctx.save();
    ctx.translate(x, y);
    ctx.rotate(ang);
    ctx.globalCompositeOperation = 'destination-out';
    ctx.beginPath();
    ctx.moveTo(0, -width/2);
    ctx.lineTo(capLengthPx, 0);
    ctx.lineTo(0, width/2);
    ctx.closePath();
    ctx.fillStyle = 'rgba(0,0,0,1)';
    ctx.fill();
    ctx.restore();
  };

  const erasePixel = (x, y, ang) => {
    ctx.save();
    ctx.translate(x, y);
    ctx.rotate(ang);
    ctx.globalCompositeOperation = 'destination-out';
    const cols = Math.ceil(capLengthPx / pixelSize);
    const rows = Math.ceil(width / pixelSize);
    const y0 = -width / 2;
    for (let c = 0; c < cols; c++) {
      const frac = 1 - (c / cols);
      const activeRows = Math.max(1, Math.floor(rows * frac));
      const x0 = c * pixelSize;
      for (let r = 0; r < activeRows; r++) {
        if (Math.random() < 0.85) {
          const yCell = y0 + r * pixelSize;
          ctx.fillStyle = 'rgba(0,0,0,1)';
          ctx.fillRect(x0, yCell, pixelSize, pixelSize);
        }
      }
    }
    ctx.restore();
  };

  switch (capStyle) {
    case 'feather':
      eraseFeather(sx, sy);
      eraseFeather(ex, ey);
      break;
    case 'chop':
      eraseChop(sx, sy, tStart);
      eraseChop(ex, ey, tEnd + Math.PI);
      break;
    case 'pixel':
      erasePixel(sx, sy, tStart);
      erasePixel(ex, ey, tEnd + Math.PI);
      break;
  }

  mainCtx.drawImage(off, 0, 0);
}

思路说明

1. 用圆形径向渐变替代矩形线性渐变，擦除区域的边缘是天然的弧形，完美解决直边问题
2. 渐变范围精准控制：线宽范围内完全擦除（去掉butt端点的直边突出），向外延伸capLengthPx的距离逐渐透明，形成自然的羽化过渡
3. 实现简单，不需要额外计算曲率，适配所有半径的圆弧

解决方案2：同曲率圆弧羽化擦除（适配小半径圆弧） #

如果你的圆弧半径很小，圆形羽化可能会和原圆弧的轮廓有细微差异，这时候可以用和原圆弧同曲率的小圆弧来擦除，边缘贴合度更高：

// 替换方案1中的eraseFeather函数
const eraseFeather = (x, y, isStart) => {
  ctx.save();
  ctx.globalCompositeOperation = 'destination-out';
  // 根据弧长计算擦除小圆弧的角度（弧长=半径×弧度）
  const eraseAngle = capLengthPx / radius;
  // 确定小圆弧的角度范围
  const [eraseStart, eraseEnd] = isStart 
    ? [startRad - eraseAngle, startRad] 
    : [endRad, endRad + eraseAngle];
  // 创建沿切线方向的线性渐变：从端点向外逐渐透明
  const tanX = isStart ? Math.cos(tStart) : Math.cos(tEnd + Math.PI);
  const tanY = isStart ? Math.sin(tStart) : Math.sin(tEnd + Math.PI);
  const grad = ctx.createLinearGradient(
    x, y,
    x + tanX * capLengthPx, y + tanY * capLengthPx
  );
  grad.addColorStop(0, 'rgba(0,0,0,1)');
  grad.addColorStop(1, 'rgba(0,0,0,0)');
  // 画同曲率的小圆弧擦除
  ctx.strokeStyle = grad;
  ctx.lineWidth = width;
  ctx.lineCap = 'butt';
  ctx.beginPath();
  ctx.arc(cx, cy, radius, eraseStart, eraseEnd, isStart);
  ctx.stroke();
  ctx.restore();
};

// 调用时传递isStart参数
case 'feather':
  eraseFeather(sx, sy, true);
  eraseFeather(ex, ey, false);
  break;

思路说明

1. 利用原圆弧的曲率计算小擦除圆弧的角度，确保擦除区域的边缘和原圆弧完全贴合
2. 沿切线方向的线性渐变让擦除强度从端点向外逐渐减弱，形成自然的弧形羽化
3. 适配小半径圆弧场景，边缘过渡比圆形羽化更丝滑

最终效果验证 #

修改后，原来的直边接缝会完全消失，圆弧端点会顺着原轮廓自然渐变消失，和你提供的参考帧平滑效果完全一致。如果需要调整羽化强度，只需要修改capLengthPx参数或者渐变的色标位置即可。