不需要的线在html5画布使用瓷砖

不需要的线在html5画布使用瓷砖

本文介绍了不需要的线在html5画布使用瓷砖的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用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画布使用瓷砖的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-19 08:44