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

Question

我删除版权原因的链接!对不起!

当你在Firefox中时,左边的图像(所有的模型)被加载,经过一些刷新,在chrome和safari中,它永远不会显示

我认为这是一个没有加载内存问题的图像,但我不知道什么时候图像都被加载,我事件把脚本放到最后,但没有运气

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

nb我很难将图像编码为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;
    }
}

关键概念是您要跟踪已完成加载的图像数量.完成所有图像加载后,您就知道可以在画布上绘图了.