【发布时间】：2012-03-30 11:39:17
【问题描述】：
我正在使用 40 像素 * 40 像素的正方形在画布上绘制地图。 一切都很好，直到我通过偏移画布（使用变换）滚动地图。然后，不知从何而来，瓷砖之间出现了线条。见下图。
为什么？
【问题讨论】：
-
你的一段代码会有用
标签： javascript html canvas html5-canvas
【发布时间】：2012-03-30 11:39:17
【问题描述】：
这看起来像浮点定位（例如，您已滚动到 100.5、100.5）与大多数浏览器用于在 2D 画布上显示图像的双线性过滤相结合。
基本上，如果您在像素之间绘制图像（），则每个像素都会在两个像素上进行平滑处理，这意味着边缘在背景上以 50% 的 alpha 绘制。这会破坏平铺，因为下一个平铺的边缘是相同的，并且在另一个平铺的 50% alpha 上以 50% 的 alpha 绘制，加起来是 75% 的 alpha。这将比瓷砖的其余部分显得更亮或更暗（取决于背景颜色）。所以你会在瓷砖的边缘得到“接缝”。
修复： Math.round() 你的图像坐标，以及对 translate() 的任何调用（因为平移半个像素具有相同的效果）。这样可以保证所有内容都绘制到像素对齐的网格中，并且不会出现接缝。
【讨论】：
-
是的，我自己发现了这个——你的答案是正确的。事实证明，如果您使用除整数以外的任何其他东西来偏移画布，这些线就会出现。所以我简单地使用了 Math.floor(offsetX) 并解决了这个问题。