画布根本不渲染图像

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[]

}