Canvas HTML加載時間

Question

我嘗試使用HTML Canvas制作游戲，但我遇到了問題。

當我用'window.onload'調用'init'函數時，我的程序不會加載任何圖像。 畫布已經創建，但圖像不存在，當我在chrome控制台中提交我的功能時，圖像出現......所以我想加載我的圖像並在完成后執行該功能。

感謝幫助 ！

var requestAnimId;

// Initialisation
function init() {

    var tilemapCtx = new Canvas('tilemap', 800, 600, 1);

    var tilemap = new Tilemap("sand", tilemapCtx);

    requestAnimId = window.requestAnimationFrame(update);
}

// Boucle de rafraîchissement
function update() {

    requestAnimId = window.requestAnimationFrame(update);
}

window.onload = init;

這是Tilemap：

var Tilemap = function(map, canvas) {

for (var y = 0; y < 10; y++) {

    for (var x = 0; x < 10; x++) {
        // Création de la tile 
        this.image = new Image();
        // Définition de l'image  
        switch(tilemaps[map][y][x]) {
            case " ": 
                this.image.src = "assets/sand.png";
            break;
            case "#": 
                this.image.src = "assets/wall.png";
            break;
        } 
        // Affichage de l'image 
        //canvas.drawImage(this.image, tileX, tileY, tilesetWidth, tilesetHeight, x, y, 32, 32);
        canvas.drawImage(this.image, 32, 32);
    }
}

}

和畫布：

var Canvas = function(name, width, height, zIndex) {
this.canvas = window.document.createElement("canvas");
this.canvas.id = name;
this.canvas.style.position = "absolute";
this.canvas.width = width;
this.canvas.height = height;
this.canvas.style.zIndex = zIndex;
document.body.appendChild(this.canvas);

return this.canvas.getContext('2d');

}

Answer 1

請注意，對於您的圖塊，您只使用兩個圖像 。 您使用雙循環將加載100個圖像 。

一個問題是你最終只創建了100個圖像 。

現在你的圖像沒有被繪制的原因是因為它們尚未被loaded 。 在嘗試繪制圖像之前，您需要為圖像加載時間。

您需要創建一個圖像的數組列表，並確保在調用init()之前加載它們

這將確保在調用init()之前已加載所有圖像。

var len = pics.length;
var loadCounter = 0;
for(var i = 0; i < len; i++) {
    $(document.createElement(img)).attr('src', pics[i]).load(function() {
        alert(pics[i] + 'is loaded');
        loadCounter++;
        if(loadCounter === len) {
            alert("all are loaded");   
        }
    });
}