畫布根本不渲染圖像

Question

我從服務器發送了一系列敵人，由於它們已被序列化，因此我正在重新創建它們。 之后，我試圖讓它們在畫布上渲染，但是由於某種原因，它不起作用。

for (var i = 0; i < enemies.length; i++) { // recreate each enemy and render it
    var image = new Image();
    var currentFish = new Fish();
    for (var key in enemies[i]) { // copying properties to object that has the necessary methods
        if (enemies[i].hasOwnProperty(key)) {
            currentFish[key] = enemies[i][key];
        }
    }
    image.src = currentFish.icon;
    image.onload = function () {
        ctx.drawImage(image, currentFish.position.x, currentFish.position.y);
    };
    ctx.fillText('Drone', 250, 200);    
}

我認為問題在於image.onload直到幀之后或幀之間才被調用，因此它不可見。 我不確定如何解決此問題。

編輯：

我忘了提到我正在使用requestAnimationFrame來處理畫布的渲染，因此我不知道何時渲染幀。

Answer 1

問題是您的外部for循環正在每個循環中覆蓋image變量（可以加載和繪制圖像之前）。

試試這個替代的圖像加載器，它將所有圖像預加載到imgs []中，然后調用start（）：

// image loader

var imageURLs = [];  // put the paths to your images here
var imagesOK = 0;
var imgs = [];
imageURLs.push("");
loadAllImages(start);

function loadAllImages(callback) {
    for (var i = 0; i < imageURLs.length; i++) {
        var img = new Image();
        imgs.push(img);
        img.onload = function() { 
            imagesOK++; 
            if (imagesOK >= imageURLs.length) {
                callback();
            }
        };
        img.onerror = function() {alert("image load failed");} 
        img.crossOrigin = "anonymous";
        img.src = imageURLs[i];
    }      
}

function start() {

    // imgs[] holds fully loaded images
    // imgs[] is in the same order as imageURLs[]

}