Canvas绘制偏移问题：如何让Canvas精准覆盖256×256网格图像？

嘿，我碰到过好几次这种Canvas对齐的坑，咱们来一步步解决你的偏移问题：

1. 先搞定Canvas的「双重尺寸」问题 #

Canvas有两个容易混淆的尺寸：一个是它的内在绘图缓冲区尺寸（通过width/height属性设置），另一个是页面显示尺寸（通过CSS设置）。如果这俩不匹配，不仅会拉伸图形，还会导致偏移。

你需要让这两个尺寸都严格等于网格图的256px×256px：

<!-- 直接在标签里设置属性和样式 -->
<canvas id="canvas" width="256" height="256" style="width:256px; height:256px;"></canvas>

或者用JS动态设置（适合需要动态调整的场景）：

const canvas = document.getElementById('canvas');
// 先设置绘图缓冲区尺寸
canvas.width = 256;
canvas.height = 256;
// 再同步显示尺寸
canvas.style.width = '256px';
canvas.style.height = '256px';

2. 清除默认样式的干扰 #

浏览器的默认样式会给元素加margin、padding甚至默认边框，这些都会让Canvas和网格图错位。给容器和Canvas加个样式重置：

/* 容器设为相对定位，作为Canvas的定位基准 */
.grid-container {
  position: relative;
  margin: 0;
  padding: 0;
}

#canvas {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  border: none; /* 去掉默认边框，不然会占额外空间 */
}

这样Canvas就能完全覆盖在网格图上方，没有任何偏移空间。

3. 精准计算绘制坐标 #

你的网格是8×8，每个格子的尺寸是256/8=32px。绘制黑色方块时，要确保坐标严格对应网格的格子位置：

const ctx = canvas.getContext('2d');
ctx.fillStyle = 'black';
// 比如绘制第1行第1列的格子（左上角）
ctx.fillRect(0, 0, 32, 32);
// 绘制第2行第3列的格子
ctx.fillRect(32*2, 32*1, 32, 32);

如果之前用的是8px尺寸，那肯定和32px的网格格子对不上，这也是偏移的常见原因哦。

4. 强制像素对齐（可选） #

有时候浏览器的亚像素渲染会导致轻微偏移，可以给Canvas加个样式强制像素对齐：

#canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

这会让Canvas的绘制内容严格对齐像素网格，避免模糊或偏移。

按照这些步骤调整后，你的黑色方块就能和网格图精准对齐啦！

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