javascript - 直到用户点击图像才在 Canvas 上绘制？

Question

我用执行类似于以下操作的函数绘制了几个图像:

context.drawImage(img, width / 2 * (-1), height / 2 * (-1), width, height);

我读到我需要等待图像加载后才能绘制它，像这样:

img.onload = function() {
    context.drawImage(img, width / 2 * (-1), height / 2 * (-1), width, height);
};

然而，这会导致绘制图像，但之后没有绘制任何东西，因为我每隔几毫秒调用一次绘制函数，因为它是简单游戏“动画”循环的一部分。

有没有一种方法可以让我在继续运行 init() 函数中的代码之前等待 onload 事件？

我想是这样的:

var image_loaded = false;
img.onload = function() {
    image_loaded = true;
};
if(image_loaded) {
    animate();
}

应该工作？除非我需要添加一个 timeOut 函数来继续调用 init() 直到 image_loaded 为真？

Answer 1

Live Demo

var imagesLoaded = [],
    images = [
        'http://www.zombiegames.net/inc/screenshots/The-Last-Stand-Union-City.png', 
    'http://www.zombiegames.net/inc/screenshots/Lab-of-the-Dead.png',
    'http://www.zombiegames.net/inc/screenshots/Zombotron.png',
    'http://www.zombiegames.net/inc/screenshots/Road-of-the-Dead.png'],
    canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

canvas.width = 640;
canvas.height = 480;

function init(){
    // just loops through the images.
    if(imagesLoaded.length > 0){
        ctx.drawImage(imagesLoaded[0], 0, 0, 640, 480);
        imagesLoaded.push(imagesLoaded.shift());   
    }
    setTimeout(init,500);
}

function preload(){
    for(var i = 0; i < images.length; i++){
        (function(value){
            return function(){
                var loadedImage = new Image();
                loadedImage.src = images[value];
                loadedImage.onload = function(){
                    imagesLoaded.push(loadedImage);  
                } 
            }();
        })(i);

    }
    checkLoaded();
}

function checkLoaded(){
    if(imagesLoaded.length === images.length){
        console.log(imagesLoaded.length);
        init(); 
    } else{
        setTimeout(checkLoaded,30);
    }
}

preload();

以上是如何预加载图像并等待执行其他操作的示例。基本上，您所做的就是将所有图像放在一个数组中，然后为每个图像添加 onload 事件。当它们将 I 通过它们加载到另一个数组中时，该数组包含所有加载的图像。一旦两个数组的长度匹配，所有图像就可以使用了。

另一种方法是在加载时增加一个计数器，并根据数组的长度检查它的值。当计数器变量等于图像数组的长度时，这意味着它们已全部加载并准备好使用。