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

別のより簡単な解決策を次に示します。

交換：

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

と：

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

その後、境界線が消えます( http://jsfiddle.net/9YLmh/3/ )。

境界線はキャンバスが原因ではなく、画像上の単なるピクセルであることがわかりました。

于 2013-11-15T02:15:41.563 に答える
0

FF 25.0 でのテストでは、HW アクセラレーションが有効になっているかどうかに関係なく、問題が再現されます。以下は、この問題を解決するための私の解決策です（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 に答える