javascript - html5 Canvas 图像不显示或图像未加载

Question

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

当你在 Firefox 中时，左边的图像(所有模型)被加载，刷新几次后，在 chrome 和 safari 中，它永远不会显示

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

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

注意 我很难将图像编码为用于 Canvas 显示的 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;
    }
}

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