如何在应用缩放与平移变换的HTML Canvas中计算偏移量以实现像素完美的矩形绘制

要解决Canvas在平移、缩放变换下的像素完美矩形绘制问题，核心是让矩形边框在经过变换后，刚好对齐Canvas图像缓冲区的像素中心（避免抗锯齿），同时保证线条宽度在屏幕上始终为1px。下面是具体的解决方案和代码实现：

核心原理 #

当我们对Canvas上下文应用translate和scale变换后，内部坐标到图像缓冲区坐标的映射关系是：

变换后坐标 = (内部坐标 + 平移量) * 缩放比例

我们需要让变换后的矩形边框路径落在图像缓冲区的像素中心（即.5结尾的坐标，比如0.5、1.5），这样1px宽度的线条（通过lineWidth = 1/缩放比例实现）会刚好覆盖整个像素，不会出现模糊的抗锯齿效果。

坐标调整方法 #

编写一个工具函数，将内部坐标反向映射到变换后的像素中心位置，再转换回内部坐标：

function adjustCoordinate(coord, translate, scale) {
  // 计算坐标经过平移缩放后的位置
  const transformed = (coord + translate) * scale;
  // 取最近的半整数（像素中心）
  const roundedToPixelCenter = Math.round(transformed * 2) / 2;
  // 转换回变换前的内部坐标
  return (roundedToPixelCenter / scale) - translate;
}

完整代码实现 #

对原始代码进行改造，用上述函数调整矩形的所有关键坐标：

const canvases = [
  { ctx: document.getElementById('canvasOriginal').getContext('2d'), scale: 1, translateX: 0, translateY: 0 },
  { ctx: document.getElementById('canvasZoomed').getContext('2d'), scale: 1.5, translateX: -0.5, translateY: -0.5 }
];

function adjustCoordinate(coord, translate, scale) {
  const transformed = (coord + translate) * scale;
  const roundedToPixelCenter = Math.round(transformed * 2) / 2;
  return (roundedToPixelCenter / scale) - translate;
}

for (const { ctx, scale, translateX, translateY } of canvases) {
  ctx.translate(translateX, translateY);
  ctx.scale(scale, scale);
  
  // 原始矩形参数
  let x = 1.5;
  let y = 1.5;
  let width = 4;
  let height = 4;
  
  // 调整矩形的四个关键坐标（左上角、右下角）
  const adjustedX = adjustCoordinate(x, translateX, scale);
  const adjustedY = adjustCoordinate(y, translateY, scale);
  const adjustedRight = adjustCoordinate(x + width, translateX, scale);
  const adjustedBottom = adjustCoordinate(y + height, translateY, scale);
  
  // 计算调整后的宽高（保证变换后为整数像素长度）
  const adjustedWidth = adjustedRight - adjustedX;
  const adjustedHeight = adjustedBottom - adjustedY;
  
  ctx.beginPath();
  ctx.rect(adjustedX, adjustedY, adjustedWidth, adjustedHeight);
  ctx.lineWidth = 1 / scale;
  ctx.strokeStyle = 'red';
  ctx.stroke();
}

canvas {
  border: 1px solid #ccc;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  width: 100px;
  height: 100px;
}

<canvas id="canvasOriginal" width="10" height="10"></canvas>
<canvas id="canvasZoomed" width="10" height="10"></canvas>

关键细节说明 #

1. 为什么调整右下角坐标而非直接修改宽高？
   直接调整宽高可能导致矩形整体偏移，而调整右下角坐标能保证整个矩形的边框都对齐像素中心，避免局部模糊。
2. 平移变换的处理
   函数中已经包含了平移量的计算，无论设置多少平移值，都能准确将坐标映射到像素中心。
3. 缩放比例的适配
   lineWidth = 1/scale保证了变换后的线条宽度为1像素，再结合image-rendering: pixelated的CSS属性，最终在屏幕上呈现完美的1px边框。

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