html5 画布图像不显示或图像未加载

Question

出于版权原因，我删除了链接！.. 抱歉！

当您在 Firefox 中时，左侧的图像（所有模型）已加载，经过几次刷新，在 chrome 和 safari 中，它永远不会显示

我认为这是图像未加载到内存中的问题，但我不知道图像何时全部加载，我将脚本放在最后，但没有运气

那么问题来了，应该怎么做才能使图像被加载.. JavaScript 代码中是否存在错误？

n.b. 我很难将图像编码为 base64 以用于画布显示...这样做是否可行或明智？

Answer 1

实际上，您可以确定所有图像何时完成加载。为此，您只需为图像对象的onload 属性指定一个回调函数。所以，你最终会得到这样的东西（除了你已经在canvas.js 中的代码）：

var loaded_images = 0;
var image_objects = [];

// This is called once all the images have finished loading.
function drawOnCanvas() {
    for (var i = 0; i < image_objects.length; ++i) {
        ctx.drawImage(image_objects[i], 0, 0); 
    }
}

function handleLoadedImage() {
    ++loaded_images;

    // Check to see if all the images have loaded.
    if (loaded_images == 7) {
        drawOnCanvas();
    }
}

document.ready = function() {
    for (var i=0;i<myimages.length;i++) {
        var tempimage = new Image();
        tempimage.src= myimages[i];
        tempimage.onload = handleLoadedImage;
        image_objects[i] = tempimage;
    }
}

关键概念是您要跟踪已完成加载的图像数量。加载完所有图像后，您就可以在画布上进行绘制了。