Question

因此，出于某种原因，我在FireFox中的瓷砖**周围有每个瓷砖边框*，但在Chrome中没有。任何人都可以告诉我如何在Firefox中修复此问题而不影响Chrome？

每个瓷砖在firefox中都有一个深蓝色边框，应该是纯蓝色图像。

从瓷砖表中裁剪瓷砖，并将其放置在画布上。

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

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

所以，问题解决了，希望对你有所帮助。

Answer 2

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

取代：

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

使用：

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

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

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

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

2 个答案: