Javascript 一个预加载图像的函数-现在需要绘制它们，但是如何绘制呢？

我在玩弄帆布。我有点迷路了

我有这个功能：

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

唯一的问题是，我不知道以后怎么再画

如果我在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);
    }

当我想画的时候，我会说：

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思想，这样如果它加载了ok，我就可以绘制它，如果没有，就别管它了

有人能给我一些建议吗？基本上，我只是想更多地基于类，而不是像通常那样，用一个丑陋且不可维护的巨大javascript文件来处理一堆脏东西。

我使用的一个函数：

function ImageLoader(sources, callback) 
{
    var images = {};
    var loadedImages = 0;
    var numImages = 0;

    // get num of sources
    for (var src in sources) {
        numImages++;
    }

    for (var src in sources) {
        images[src] = new Image();
        images[src].onload = function() {

            if (++loadedImages >= numImages) {
                callback(images);
            }
        };
        images[src].src = sources[src];
    }
}

你这样称呼它：

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

var sources = {
    bg: path/to/img.png,
    title: path/to/img/png
};

var _images = {};
isReady = ImageLoader(sources, function(images) {
    _images = images;
});

然后访问您的图像

_images.bg;

---

示例：

drawImage（\u images.bg，0，0）
这似乎是一个复杂的问题，但实际上并不像看上去那么糟糕。如果你想使用预先存在的代码，或者只是想看看一些想法，你可以看看：这个库在HTML5版本的《割断绳索》中使用过

一个简单的自定义实现可以如下所示：

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();
        }
    }
}

函数加载映像（arr，回调）{
this.images={}；
var loadedImageCount=0；
//确保arr实际上是一个数组和任何其他错误检查
对于（变量i=0；i=arr.length）{
回调（）；
}
}
}

然后你可以这样称呼它：

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]);
    }
});

var loader=loadImages（['path/to/img1'，'path/to/img2'，'path/to/img3'，function（））{
ctx.drawImage（loader.images['path/to/img1']）；//这将在加载所有图像后绘制图像1
//绘制所有加载的图像
对于（var i=0；i

如果您想了解更多关于资产加载的详细信息，可以查看Udacity HTML5游戏开发课程的资产加载部分
我感谢您花时间写下所有内容，以及您提供的链接：）谢谢！@DavidG没问题，我希望这会有所帮助。如果您不介意，请快速提问。然后我将如何绘制其中一幅图像我有var context=canvas.createCanvas（）；和context.drawImage（bg，0，0）；之前我根据@Jarrod所做的做了一个小编辑。另一个替代方法是使用一个简单的状态机来管理加载的时间，一旦加载了所有内容，让系统转到您正在构建的内容的实际交互上，但这是另一天的对话：）。惊人的解决方案。有一个输入错误：
this.images[arr[i]=img；
（代码中的a小姐）