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

}

画布根本不渲染图像

1 个答案: