Canvas drawImage跨浏览器像素网格不一致，已尝试同类方案仍未解决

我太懂这种感觉了——明明已经解决过一次drawImage偏移1像素的坑，结果换了场景又踩进去，简直让人头大！既然你已经把AnimationFrame的参数都截断成整数了还出问题，咱们可以从这几个方向排查：

• 检查Canvas的像素与显示尺寸是否匹配
  这是最容易被忽略的点！Canvas的width和height属性是它的实际像素分辨率，而CSS设置的width/height是它在页面上的显示尺寸。如果两者比例不一致（比如Canvas是800x600，CSS设成400x300但不是整数倍，或者反过来），浏览器会自动缩放绘制内容，哪怕你传的是整数坐标，缩放后也可能变成半像素位置，导致偏移或模糊。
  你可以在控制台打印确认：

  console.log('Canvas像素尺寸:', canvas.width, canvas.height);
  console.log('Canvas显示尺寸:', getComputedStyle(canvas).width, getComputedStyle(canvas).height);
  

  确保两者要么完全一致，要么是整数倍缩放（比如2x、3x）。

• 确认drawImage的参数没有搞混
  drawImage有好几种重载形式，比如带源区域和目标区域的写法是：drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)。有时候忙起来很容易把源坐标（sx/sy）和目标坐标（dx/dy）搞反，或者把宽高参数放错位置。可以在绘制前把所有参数打印出来，确认每个数值都是你预期的整数：

  console.log('绘制参数:', sx, sy, sw, sh, dx, dy, dw, dh);
  

• 检查精灵表本身的像素对齐
  有时候问题出在精灵表素材上！比如导出精灵表时，工具因为抗锯齿、自动排版或者缩放，导致某些帧的起始坐标不是严格整数像素。你可以用图像编辑工具打开精灵表，查看每个帧的左上角坐标，确保都是整数，没有半像素偏移。

• 排查上下文变换的影响
  如果你的绘制代码之前用到了ctx.translate()、ctx.scale()或者ctx.rotate()这类变换，一定要确保在绘制精灵前重置了上下文状态。最好的做法是用save()和restore()包裹绘制逻辑：

  ctx.save();
  // 这里放你的精灵绘制代码
  ctx.drawImage(...);
  ctx.restore();
  

  避免之前的变换残留导致坐标偏移。

• 强制二次取整，规避浮点数精度
  有时候哪怕你在构造函数里截断了整数，计算过程中也可能因为浮点数精度问题出现类似10.0000000001的数值（看起来是整数，但实际是浮点数），导致浏览器渲染时按半像素处理。你可以在绘制前再用Math.floor()或者Math.round()处理一遍坐标参数：

  ctx.drawImage(
    spriteSheet,
    Math.floor(sx), Math.floor(sy), sw, sh,
    Math.floor(dx), Math.floor(dy), dw, dh
  );
  

先从这几点入手排查，应该能找到问题所在！

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