javascript - 预加载图像的功能 - 现在需要绘制它们，但是如何绘制？

Question

我正在涉足 Canvas 。我有点迷失了方向。

我有这个功能:

function preloadimages(arr) {
        var newimages = []
        var arr = (typeof arr != "object") ? [arr] : arr
        for (var i = 0; i < arr.length; i++) {
            newimages[i] = new Image()
            newimages[i].src = arr[i]
        }
    }

我这样调用它:

preloadimages(['images/background.png', 'images/hero.png', 'images/monster.png']);

唯一的问题是，我不知道以后如何重新绘制它们。

如果我在我的 js 中预加载一张图片，我会说:

var bgOk = false;
var bg = new Image();
bg.onload = function () {
    bgOk = true;
};
bg.src = "images/background.png";

然后当我想要绘制它时，我会说:

if (bgOk) {
        context.drawImage(bg, 0, 0);
    }

就是这样。问题是我做了一个预加载器类，我真的不知道现在如何只调用我现在想绘制的图像，甚至不知道如何实现 bgOk 想法以便如果它加载正常，我可以绘制它，如果没有，别管它。

有人可以就此给我建议吗？我基本上只是在尝试更多地基于类，而不是我通常使用一个丑陋且不可维护的巨大 javascript 文件的肮脏困惑。

Answer 1

这似乎是一个复杂的问题，但实际上并没有看起来那么糟糕。如果您想使用预先存在的代码，或者只是想看看一些想法，您可以看看:http://thinkpixellab.com/pxloader/该库用于 HTML5 版本的 Cut The Rope。

一个简单的自定义实现可能如下所示:

function loadImages(arr, callback) {
    this.images = {};
    var loadedImageCount = 0;

    // Make sure arr is actually an array and any other error checking
    for (var i = 0; i < arr.length; i++){
        var img = new Image();
        img.onload = imageLoaded;
        img.src = arr[i];
        this.images[arr[i] = img;
    }

    function imageLoaded(e) {
        loadedImageCount++;
        if (loadedImageCount >= arr.length) {
            callback();
        }
    }
}

然后你可以这样调用它:

var loader = loadImages(['path/to/img1', 'path/to/img2', 'path/to/img3'], function() {
    ctx.drawImage(loader.images['path/to/img1']); // This would draw image 1 after all the images have been loaded

    // Draw all of the loaded images
    for (var i = 0; i < loader.images.length; i++) {
        ctx.drawImage(loader.images[i]);
    }
});

如果您想了解有关 Assets 加载的更多详细信息，可以查看 Udacity 的 HTML5 游戏开发类(class)的 Assets 加载部分 https://www.udacity.com/course/cs255