Javascript 为什么在firefox而不是chrome中我的剪辑图像中有边框？

因此，出于某种原因，我在FireFox中的分片**周围有一个分片边框*，但在Chrome中没有。有人能告诉我如何在Firefox中解决这个问题而不影响Chrome吗

在firefox中，每个磁贴周围都有一个深蓝色边框，而它应该是纯蓝色的图像

瓷砖从瓷砖表面裁剪，并放置在画布上

var canvasWidth=800；
var canvasHeight=600；
var tilemap；
var tilemapImg=新图像（）；
tilemapImg.src='lsf-sheet-1.png'；
函数Tilemap（）{
这个高度=5；
这个宽度=5；
该宽度=4；
该高度=3；
this.tile=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]；
这个.tileSize=16；
this.ready=true；
}
函数drawCanvas（）{
var ctx=$（'#canvas'）[0].getContext（“2d”）；//获取画布的上下文
如果（tilemap.ready）{
对于（变量i=0；i<（tilemap.height*tilemap.width）；i++）{
var tentile=tilemap.tile[i]；
var tempNum=i；
var tempHeight=0；
var cx=（tilemap.tile[i]%tilemap.sheetWidth）*tilemap.tileSize；
var-cy=0；
而（Tentile>=tilemap.sheetWidth）{
TENTILE-=瓷砖贴图的板材宽度；
cy+=tilemap.tileSize；
}
while（tempNum>=tilemap.width）{
tempNum-=tilemap.width；
tempHeight++；
}
var tileX=（（i%tilemap.width）*tilemap.tileSize）；
如果（（tileX+scrollX）>=-tilemap.tileSize&（tileX+scrollX）在FF 25.0上进行测试，则无论硬件加速是否启用，问题都会重新出现。以下是我解决此问题的解决方法（不影响Chrome）：


替换代码：

if((tileX + scrollX) >= -tilemap.tileSize && (tileX + scrollX) <= scrollX + canvasWidth){
                ctx.drawImage(tilemapImg, 
                    cx, 
                    cy, 
                    tilemap.tileSize, 
                    tilemap.tileSize, 
                    tileX + scrollX,
                    tempHeight * tilemap.tileSize,
                    tilemap.tileSize, 
                    tilemap.tileSize
                );
            }

如果（（tileX+scrollX）>=-tilemap.tileSize&&（tileX+scrollX）=-tilemap.tileSize&&（tileX+scrollX）这里是另一个更简单的解决方案：

替换：

                    cx, 
                    cy, 
                    tilemap.tileSize, 
                    tilemap.tileSize, 

与：

然后边界消失（）

我发现边框只是图像上的像素，而不是画布造成的。
FF（极光27）中没有边框。您是否启用了硬件加速？我在FireFox 25.0上，如何检查硬件加速是否启用？好的，根据本页，我的硬件加速已启用，因为我没有看到“GPU加速Windows:0/1。”消息。如果您？在我关闭它时似乎已修复。这是什么意思？这是我的图形卡？感谢您的时间和回复，但这也太慢，无法使用（示例中未显示）它似乎只在工作表的第一块瓷砖上起作用。其他瓷砖的周围仍然有边框。下面是一个JSfiddle，其他瓷砖也在使用。
if ((tileX + scrollX) >= -tilemap.tileSize && (tileX + scrollX) <= scrollX + canvasWidth) {
                ctx.save();
                ctx.beginPath();
                ctx.rect(tileX + scrollX, tempHeight * tilemap.tileSize, tilemap.tileSize, tilemap.tileSize);
                ctx.clip();
                ctx.drawImage(tilemapImg, cx, cy, tilemap.tileSize, tilemap.tileSize, tileX + scrollX, tempHeight * tilemap.tileSize, tilemap.tileSize + 1, tilemap.tileSize + 1);
                ctx.restore();
            }

                    cx, 
                    cy, 
                    tilemap.tileSize, 
                    tilemap.tileSize, 

                    cx, 
                    cy, 
                    tilemap.tileSize-1, 
                    tilemap.tileSize-1,