如何修复ARM处理器设备上Safari的渐变图形渲染条纹问题？

在搭载ARM处理器（含Apple Silicon）的设备上，Safari渲染带渐变填充的旋转多边形时，图形顶部会出现水平条纹失真。调整旋转角度、使用fillRect或纯色填充时问题消失，但复杂渐变多边形的旋转动画需求下，手动清除失真的方式不适用于带背景的Canvas场景。以下是几种实用的修复方案：

• 给渐变添加微小偏移
  给渐变的起点/终点设置极小的像素偏移（比如0.001px），打破Safari渲染时的像素对齐问题，避免条纹生成。示例代码：

  // 原线性渐变
  // const gradient = ctx.createLinearGradient(0, 0, 0, 200);
  // 修改后添加微小y轴偏移
  const gradient = ctx.createLinearGradient(0, 0.001, 0, 200);
  gradient.addColorStop(0, '#f00');
  gradient.addColorStop(1, '#00f');
  

• 强制开启图像平滑
  启用Canvas的图像平滑并设置高质量，缓解亚像素渲染带来的条纹问题：

  ctx.imageSmoothingEnabled = true;
  ctx.imageSmoothingQuality = 'high';
  

• 离屏Canvas预渲染
  先在离屏Canvas绘制好渐变多边形，再将其作为图像旋转绘制到主Canvas，绕过Safari直接旋转渐变图形的渲染bug，同时保留背景：

  // 创建离屏Canvas
  const offscreen = document.createElement('canvas');
  const offCtx = offscreen.getContext('2d');
  offscreen.width = 400;
  offscreen.height = 400;
  
  // 预绘渐变多边形
  const grad = offCtx.createLinearGradient(0, 0, 0, 400);
  grad.addColorStop(0, '#ff0000');
  grad.addColorStop(1, '#0000ff');
  offCtx.fillStyle = grad;
  offCtx.beginPath();
  offCtx.moveTo(200, 50);
  offCtx.lineTo(350, 350);
  offCtx.lineTo(50, 350);
  offCtx.closePath();
  offCtx.fill();
  
  // 主Canvas动画逻辑
  let angle = 0;
  function animate() {
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.save();
    ctx.translate(200, 200);
    ctx.rotate(angle);
    ctx.translate(-200, -200);
    ctx.drawImage(offscreen, 0, 0);
    ctx.restore();
    angle += 0.01;
    requestAnimationFrame(animate);
  }
  animate();
  

• 调整旋转中心的像素对齐
  将旋转中心设置为半像素位置（比如200.5而非200），适配Canvas的像素渲染规则，减少亚像素渲染导致的条纹：

  ctx.save();
  // 半像素偏移的旋转中心
  ctx.translate(200.5, 200.5);
  ctx.rotate(angle);
  ctx.translate(-200.5, -200.5);
  // 绘制多边形
  ctx.fill();
  ctx.restore();
  

内容的提问来源于stack exchange，提问作者borodinmk