使用切片在html5画布中出现不需要的行 [英] Unwanted lines appearing in html5 canvas using tiles

问题描述

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

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.

为什么？

推荐答案

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

This looks like floating-point positioning (e.g. you've scrolled to 100.5, 100.5) combined with bilinear filtering most browsers use to display images on the 2D canvas.

基本上，如果你在像素之间绘制图像，那么每个像素都是平滑超过两个像素，这意味着边缘在背景上以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（）你的图像坐标，以及任何翻译的调用（ ）（因为翻译半个像素具有相同的效果）。这样可以保证所有内容都被绘制为像素对齐的网格，而且不会接缝。

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屋！