我的Javascript瓷磚地圖不會畫？

Question

這是我的腳本，我似乎無法弄清楚什么是錯的，我想繪制一張12 * 12的瓷磚地圖，瓷磚是32px - 32px。 當我運行頁面時，瓷磚不會繪制，我嘗試使用parse int，如下所示，但仍然無法正常工作。

if(parseInt(mapArray[x][y]) == 0){
    ctx.drawImage(rockTile, posX, posY, tileSize, tileSize);
}

這是我創建的腳本。

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = (32 * 12);
canvas.height = (32 * 12);
document.body.appendChild(canvas);

var rockTile = new Image();
rockTile.src = "../Images/dc-dngn/floor/rect_gray0.png";
var tileSize = 32;
var posX = 0;
var posY = 0;

var mapArray = [
    [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, 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, 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, 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, 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, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];

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

function drawMap(){
    for(var x = 0; x < mapArray.length; x++){
        for(var y = 0; y < mapArray[x].length; y++){
            if(mapArray[x][y] == 0){
                ctx.drawImage(rockTile, posX, posY, tileSize, tileSize);
            }
            posX += 32;
        }
        posX = 0;
        posY += 32;
    }
}

如果有人可以幫我把我的瓷磚畫得非常感謝，謝謝！

Answer 1

您必須等待圖像加載。 該圖像不是DOM的一部分，因此等待加載文檔將無濟於事。

您需要為image.onload插槽放置一個處理程序，並在調用該代碼時觸發重繪。

正常的程序是

1. 創建圖像對象
2. 為它注冊onload事件
3. 設置圖像src值

只有在調用已注冊的事件時，您才能使用圖像對象。

棘手的部分是，根據瀏覽器的不同，圖像可能會在設置src之后立即生效，如果它已經在緩存中，那么當你不遵循正確的程序時，事情顯然可能會有效（但它們不會在真實中工作）加載時需要上網的情況）。

Answer 2

你有兩個主要問題我可以看到：

1. 您在定義之前訪問document.body 。
2. 您在加載之前可能正在使用該圖像。

這是解決這兩個問題的代碼：

// variables are defined as global variables
var posX = 0;
var posY = 0;
var tileSize = 32;
var mapArray;
var canvas;
var ctx;
var rockTile;

$(function() {
    // document should be defined now
    canvas = document.createElement("canvas");
    ctx = canvas.getContext("2d");
    canvas.width = (32 * 12);
    canvas.height = (32 * 12);
    document.body.appendChild(canvas);

    mapArray = [
        [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, 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, 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, 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, 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, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    ];

    // wait until the image is loaded to draw
    rockTile = new Image();
    rockTile.onload = drawMap;
    rockTile.src = "../Images/dc-dngn/floor/rect_gray0.png";        
});

function drawMap(){
    posX = 0;
    posY = 0;
    for(var x = 0; x < mapArray.length; x++){
        for(var y = 0; y < mapArray[x].length; y++){
            if(mapArray[x][y] == 0){
                ctx.drawImage(rockTile, posX, posY, tileSize, tileSize);
            }
            posX += 32;
        }
        posX = 0;
        posY += 32;
    }
}

另外一定要仔細檢查你的圖像路徑。