javascript - Canvas drawImage - firefox/opera/ie(非 chrome)中瓷砖的可见边缘

Question

我正在将游戏 map 绘制到 Canvas 中。地面由瓷砖制成 - 简单的 64x64 png 图像。

当我在 Chrome 中绘制它时，它看起来不错(左)，但是当我在 Firefox/Opera/IE 中绘制它时(右)，我看到了可见的边缘:

当我使用四舍五入的数字时问题就消失了:

ctx.drawImage(img, parseInt(x), parseInt(y), w, h);

但是当我使用缩放时这没有帮助:

ctx.scale(scale); // anything from 0.1 to 2.0

我也试过这些，但没有改变:

1. ctx.drawImage(img, 5, 5, 50, 50, x, y, w, h);//所以不是夹紧问题
2. ctx.imageSmoothingEnabled = false;
3. 图像渲染:-moz-crisp-edges； (css)

有什么方法可以让它在 ff/op/ie 中工作吗？

---

编辑:找到部分解决方案

在宽度/高度上增加 1 个像素并按比例补偿(宽度+1/比例)似乎有帮助:

ctx.drawImage(props.img, 0, 0, width + 1/scale, height + 1/scale);

它会产生一些瑕疵，但我认为这是可以接受的。在此图像上，您可以看到没有边缘的绿色瓷砖和未补偿但仍具有可见边缘的蓝色窗口:

Answer 1

最简单的解决方案(我认为最有效)是在绘制游戏的背景图 block 时使用具有 1 像素重叠(1x1 或 2x2 更大)的图 block 。

没什么特别的，只是比平时多画一点。这避免了将额外的转换引入组合的复杂性和性能考虑。

例如:

var img = new Image();
img.onload = function () {
    for (var x = 0.3; x < 200; x += 15) {
        for (var y = 0.3; y < 200; y += 15) {
            ctx.drawImage(img, 0, 0, 15, 15, x, y, 15, 15);
            // If we merely use 16x16 tiles instead,
            // this will never happen:
            //ctx.drawImage(img, 0, 0, 16, 16, x, y, 16, 16);
        }
    }
}
img.src = "http://upload.wikimedia.org/wikipedia/en/thumb/0/06/Neptune.jpg/100px-Neptune.jpg";

之前:http://jsfiddle.net/d9MSV

之后:http://jsfiddle.net/d9MSV/1/

---

注意 正如提问者所指出的，额外的像素需要考虑缩放，因此更正确的解决方案是他的修改:http://jsfiddle.net/d9MSV/3/