javascript - Canvas 根本不渲染图像

Question

我有一系列从服务器发送的敌人，我正在重新创建它们，因为它们是序列化的。之后，我尝试让它们在 Canvas 上渲染，但由于某种原因不起作用。

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 来处理 Canvas 的渲染，因此我不知道该帧何时会渲染。

Answer 1

问题是您的外部 for 循环正在使用每个循环覆盖图像变量(在加载和绘制图像之前)。

尝试这个替代图像加载器，它将所有图像预加载到 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[]

}