使用切片在html5画布中出现不需要的行

Question

我正在使用正方形40px * 40px在画布上绘制地图。 一切顺利，直到我，通过偏移画布（使用变换），滚动地图。然后，无处不在，瓷砖之间的线条。见下图。

为什么？

Answer 1

这看起来像浮点定位（例如你已滚动到100.5,100.5）与大多数浏览器用于在2D画布上显示图像的双线性过滤相结合。

基本上，如果你在像素之间绘制图像（），每个像素在两个像素上平滑，这意味着边缘在背景上绘制50％的alpha。这打破了平铺，因为下一个平铺的边缘是相同的，并且在另一个平铺的50％alpha上绘制50％的alpha值，这相当于75％的alpha值。这将比瓷砖的其余部分显得更亮或更暗（取决于背景颜色）。所以你沿着瓷砖的边缘得到“接缝”。

修复：Math.round（）您的图像坐标，以及对translate（）的任何调用（因为翻译半个像素具有相同的效果）。这样可以保证所有内容都被绘制成像素对齐的网格，而且不会接缝。