在畫布上繪圖 - 未執行加載

Question

我嘗試將多個圖像染成畫布。

我用js歸檔此

//in draw method: 
Images[counter] = new Image(); 
    Images[counter].src = "/anImage.png"; 
    for (var i = counter; i >= 0; i--) 
    { 
     attach(ctx, Images[i], xCordinates[i], yCordinates[i]); 
    } 

function attach (cont, img, x, y) { 
    try 
    { 

     img.onload = function() { 

      cont.drawImage(this, x, y); 
     } 
    } 
    catch(ex) 
    { 
     alert(ex); 
    } 
} 

的麻煩，我有是，taht圖像的arent正確shwon。實際上，只顯示最後一個圖像。我檢查我的代碼，我絕對確信我提交給「attach」方法的座標是正確的。到期調試我發現，onload只執行循環中的最後一張圖片，我做錯了什麼？

在此先感謝。

Answer 1

下面是一個圖像加載器的例子，它將加載所有圖像，然後調用start（）函數。

在啓動（所有代碼）可以依靠的事實，所有圖像都滿載：

// image loader 

// put the paths to your images in imageURLs[] 
var imageURLs=[]; 
// push your image urls! 
imageURLs.push(""); 

// the loaded images will be placed in images[] 
var imgs=[]; 

var imagesOK=0; 
loadAllImages(start); 

function loadAllImages(callback){ 
    for (var i=0; i<imageURLs.length; i++) { 
     var img = new Image(); 
     imgs.push(img); 
     img.onload = function(){ 
      imagesOK++; 
      if (imagesOK>=imageURLs.length) { 
       callback(); 
      } 
     }; 
     img.onerror=function(){alert("image load failed");} 
     img.crossOrigin="anonymous"; 
     img.src = imageURLs[i]; 
    }  
} 

function start(){ 

    // the imgs[] array now holds fully loaded images 
    // the imgs[] are in the same order as imageURLs[] 

    // example 
    for(var i=0;i<imgs.length;i++){ 
     cont.drawImage(imgs[i],i*30,i*30); 
    } 

}