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

的關鍵概念是，你是跟蹤已完成加載圖像的數量。一旦所有的圖像加載完畢，就知道可以在畫布上繪製。