HTML 5帆布在其他圖像上繪製圖像

Question

我想要在一個畫布上繪製兩個圖像。問題是我繪製的第一張圖片可能需要比第二張圖片花費更長的時間。由於圖片是在onload事件上繪製的，因此可能會出現第一張圖像繪製在第二張圖片的頂部。

這不是我想要的，我總是希望在第一張圖片上繪製第二張圖片。有任何想法嗎？

Answer 1

var imgSrcs = ['url1', 'url2']; // <- put image URLs here 

var imgs = []; 
var loaded = 0; 
var loadCallback = function() { 
    loaded++; 
    if (loaded == imgSrcs.length) { 
     // draw imgs in correct order 
    } 
}; 

for (var i = 0; i < imgSrcs.length; i++) { 
    imgs[i] = new Image(); 
    imgs[i].addEventListener('load', loadCallback, false); 
    imgs[i].src = imgSrcs[i]; 
}