0

因此，出于某种原因，我在 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();
});
4

2 回答 2

0

Here is another more simple solution:

replace:

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

with:

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

then the borders disappear(http://jsfiddle.net/9YLmh/3/).

I found that the border is just the pixels on the image, not caused by canvas.

于 2013-11-15T02:15:41.563 回答
0

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

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

于 2013-11-14T07:46:46.803 回答