Canvas drawImage - firefox/opera/ie 中瓷砖的可见边缘（非 chrome）

Question

我正在将游戏地图绘制到画布上。地面由瓷砖制成 - 简单的 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); // so not an issue of clamping
2. ctx.imageSmoothingEnabled = false;
3. image-rendering: -moz-crisp-edges; (css)

有没有办法让它在ff/op/ie中工作？

---

编辑：找到部分解决方案

将 1 像素添加到宽度/高度并按比例（宽度 + 1/比例）进行补偿似乎有帮助：

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

它制造了一些文物，但我认为这是可以接受的。在这张图片上，你可以看到没有边缘的绿色瓷砖，以及没有补偿的蓝色窗口，仍然有可见的边缘：

Answer 1

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

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

例如：

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/