画布根本不渲染图像

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 循环正在用每个循环覆盖图像变量（在图像可以加载和绘制之前）。

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

}