我正在使用 40px * 40px 的正方形在画布上绘制地图。
一切都很好，直到我通过偏移画布（使用变换）滚动地图。然后，瓷砖之间突然出现了线条。请参阅下面的图片。
Why?
这看起来像是浮点定位（例如，您滚动到 100.5、100.5）与大多数浏览器用来在 2D 画布上显示图像的双线性过滤相结合。
基本上，如果您在像素之间绘制图像（），每个像素都会在两个像素上平滑，这意味着边缘以背景上 50% 的 alpha 值绘制。这会破坏平铺，因为下一个平铺的边缘相同，并且以 50% 的 alpha 绘制，而另一个平铺的 50% 的 alpha 则加起来为 75% 的 alpha。这将比图块的其余部分显得更亮或更暗（取决于背景颜色）。因此，瓷砖的边缘会出现“接缝”。
修复方法：Math.round() 您的图像坐标，以及对 translate() 的任何调用（因为平移半个像素具有相同的效果）。这保证了所有内容都被绘制到像素对齐的网格并且永不接缝。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
