为什么我在 Firefox 而不是 chrome 中剪切的图像中有边框？答案

【问题标题】：Why are there borders in my clipped images in firefox and not chrome?为什么我在 Firefox 而不是 chrome 中剪切的图像中有边框？
【发布时间】：2013-11-15 10:15:41
【问题描述】：

因此，由于某种原因，我在 FireFox 中的磁贴**周围有一个磁贴边框*，但在 Chrome 中却没有。谁能告诉我如何在不影响 Chrome 的情况下在 Firefox 中解决此问题？

当它应该是纯蓝色图像时，每个图块在 Firefox 中都有一个深蓝色边框。

图块从图块表中裁剪出来，并放置在画布上。

http://jsfiddle.net/9YLmh/

    var canvasWidth = 800;
var canvasHeight = 600;

var tilemap;

var tilemapImg = new Image();
tilemapImg.src = 'lsf-sheet-1.png';

function Tilemap(){
        this.height = 5;
        this.width = 5;
        this.sheetWidth = 4;
        this.sheetHeight = 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,0,0];
        this.tileSize = 16;


        this.ready = true;
}

function drawCanvas(){
    var ctx = $('#canvas')[0].getContext("2d"); //get context of canvas

    if(tilemap.ready){
        for(var i = 0; i < (tilemap.height * tilemap.width); i++){
            var tempTile = tilemap.tile[i];
            var tempNum = i;
            var tempHeight = 0;

            var cx = (tilemap.tile[i] % tilemap.sheetWidth) * tilemap.tileSize;
            var cy = 0;
            while(tempTile >= tilemap.sheetWidth){
                tempTile -= tilemap.sheetWidth;
                cy += tilemap.tileSize;
            }

            while(tempNum >= tilemap.width){
                tempNum -= tilemap.width;
                tempHeight++;
            }

            var tileX = ((i % tilemap.width) * tilemap.tileSize);

            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
                );
            }
        }
    }
}

function init() {
    var ctx = $('#canvas')[0].getContext("2d"); //get context of canvas
    ctx.scale(2.0,2.0);

    tilemap = new Tilemap();

    setInterval(drawCanvas, 1000 / 60);
}

$(document).ready(function() {
    init();
});

【问题讨论】：

在 FF (Aurora 27) 中我没有边框...你启用了硬件加速吗？
我使用的是 FireFox 25.0，如何检查是否启用了硬件加速？
好的，根据此页面blog.mozilla.org/joe/2010/11/10/… 我的硬件加速已启用，因为我没有看到“GPU Accelerated Windows: 0/1”。消息。
如果你turn it off ?
在我关闭它时似乎已修复。那是什么意思？这是我的显卡？

标签： javascript html canvas

【解决方案1】：

在 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
                );
            }

与：

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();
            }

这样，问题就解决了，希望对你有帮助。

【讨论】：

感谢您的宝贵时间和回复，但是使用起来太慢了，而且（示例中未显示）它似乎只适用于工作表的第一个图块。其他人仍然有边界。这是一个 JSfiddle 以及其他正在使用的图块。 jsfiddle.net/9YLmh/2

【解决方案2】：

这是另一个更简单的解决方案：

替换：

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

与：

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

然后边框消失（http://jsfiddle.net/9YLmh/3/）。

我发现边框只是图像上的像素，不是画布造成的。

【讨论】：