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

Question

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

为什么？

Answer 1

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

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

修复:Math.round()你的图像坐标,以及对translate()的任何调用(因为翻译半个像素具有相同的效果).这可以保证所有内容都被绘制为像素对齐的网格,并且永远不会接缝.