캔버스에서 그리기 - onload가 실행되지 않았습니다.

Question

캔버스에 여러 이미지를 넣으려고합니다.

나는 이미지가 제대로 shwon이 arent taht를 내가있다가이

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

말썽을 보관하려면 JS를 사용합니다. 사실 마지막 이미지 만 표시됩니다. 나는 나의 코드를 확인한다. 나는 꼭 "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); 
    } 

}