不需要的线在html5画布使用瓷砖 [英] Unwanted lines apearing in html5 canvas using tiles

问题描述

我使用40px * 40px的正方形在画布上绘制地图。
一切都很好，直到我，通过偏移画布（使用transform），滚动地图。然后，无处不在，瓷砖之间的线条。请参阅下面的图片。

I'm drawing a map on a canvas using squares 40px * 40px. All is well until I, by offsetting the canvas (using transform), scroll the map. Then, out of nowhere, lines apear between the tiles. See images below.

为什么？

推荐答案

这看起来像浮点定位

基本上，如果drawImage（）在像素之间的图像，每个像素都是在两个像素上平滑，这意味着边缘以50％的alpha在背景上绘制。这会打破平铺，因为下一个瓷砖的边缘是相同的，并绘制50％的alpha在另一个瓷砖的50％alpha，加起来75％的alpha。这将显示比其余的瓷砖更亮或更暗（取决于背景颜色）。

Basically, if you drawImage() an image between pixels, every pixel is smoothed over two pixels, which means the edges draw at 50% alpha over the background. This breaks tiling, because the next tile's edge is the same, and draws at 50% alpha over the other tile's 50% alpha, which adds up to 75% alpha. This will appear lighter or darker (depending on the background color) than the rest of the tile. So you get "seams" along the edges of the tiles.

要修复：Math.round（）图像坐标，以及任何调用translate（） ）（因为平移半个像素具有相同的效果）。这保证一切都画到像素对齐网格，从不接缝。

To fix: Math.round() your image co-ordinates, as well as any calls to translate() (since translating by half a pixel has the same effect). This guarantees everything is drawn to a pixel-aligned grid and never seams.

这篇关于不需要的线在html5画布使用瓷砖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！