html5 canvas图像不显示或图像未加载

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

的关键概念是，你是跟踪已完成加载图像的数量。一旦所有的图像加载完毕，就知道可以在画布上绘制。