Canvas drawImage - 在firefox / opera / ie中的tile的可见边缘（ie chrome） [英] Canvas drawImage - visible edges of tiles in firefox/opera/ie (not chrome)

问题描述

我正在画一幅游戏地图。地面由瓷砖组成 - 简单的64x64 png图像。

当我在Chrome中绘制它时，它看起来不错（左），但是当我在Firefox / Opera / IE（右），我看到边缘：

使用圆整数字时问题消失：

  ctx.drawImage（img，parseInt （x），parseInt（y），w，h）; 
  

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

  ctx.scale（scale）; //任何从0.1到2.0的
  

我也试过这些，但没有变化：

1. ctx.drawImage（img，5，50，50，x，y，w，h）; //所以不是夹紧的问题


2. ctx.imageSmoothingEnabled = false;


3. 图像渲染：-moz-crisp-edges; （css）

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

---

编辑：找到部分解决方案

宽度/高度和按比例补偿（width + 1 / scale）似乎有帮助：

  ctx.drawImage（props.img，0，0，width + 1 / scale，height + 1 / scale）; 
  

它产生了一些工件，但我认为它是可以接受的。在这张图片上，你可以看到没有边缘的绿色瓷砖和没有被补偿的蓝色窗口，仍然具有可见的边缘： b
$ b

没什么奇特的，只是画出比平常更多的画。这避免了复杂性和性能方面的考虑，例如：




p

var img = new Image（）;对于（var y = 0.3; y <200; x = 0），
img.onload = function（）{
（var x = 0.3; x <200; x + = 15） y + = 15）{
ctx.drawImage（img，0，0，15，15，x，y，15，15）;
//如果我们仅仅使用16x16瓦片，
//这将永远不会发生：
//ctx.drawImage（img，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/1/

---

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

I'm drawing a game map into canvas. The ground is made of tiles - simple 64x64 png images.

When I draw it in Chrome, it looks ok (left), but when I draw it in Firefox/Opera/IE (right), I get visible edges:

The problem disappears when I use rounded numbers:

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

But that doesn't help when I use scaling:

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

I also tried these, but no change:

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)

Is there any way to make it work in ff/op/ie?

---

Edit: Partial solution found

Adding 1 pixel to width/height and compensating it by scale (width+1/scale) seems to help:

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

It makes some artifacts, but I think it's acceptable. On this image, you can see green tiles without edges, and blue windows, which are not compensated, still with visible edges:

解决方案

The simplest solution (and I'd argue most effective) is to use tiles that have a 1 pixel overlap (are either 1x1 or 2x2 larger) when drawing the background tiles of your game.

Nothing fancy, just draw slightly more than you would normally. This avoids complications and performance considerations of bringing extra transformations into the mix.

For example:

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";

Before: http://jsfiddle.net/d9MSV

And after: http://jsfiddle.net/d9MSV/1/

---

Note as the asker pointed out, the extra pixel needs to account for scaling, so a more correct solution is his modification: http://jsfiddle.net/d9MSV/3/

这篇关于Canvas drawImage - 在firefox / opera / ie中的tile的可见边缘（ie chrome）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！