서로 캔버스에 더 많은 이미지를 그립니다.

Question

나는 모든 새로운 이미지가 가장 오래된 것을 커버하는 더 많은 이미지를 플롯하려고합니다. Iam은 Google 크롬을 사용하지만 캔버스 코드는 임의의 순서로 이미지를 그립니다.

이미지를 그리는 기능은 다음과 같습니다

function paint_img(obrazek,x,y,sirka,vyska){ 

    var obrazekk = new Image(); 

    obrazekk.src = obrazek; 

    obrazekk.onload = function(value) { 

    aaac.drawImage(obrazekk,x ,y ,sirka ,vyska); 

    }; 

    //aaac.moveToTop(); 

    //aaac.stroke(); 

    //aaac.restore(); 

} 

을하지만 더 많은 이미지를 그릴하려고 할 때 순서는 무작위입니다. 그들은 주문을 img1, IMG2, img3과 (예를 들어)이 코드에 의해 img4보다 drawen되지 않습니다

for (i=1;i<=10;i++){ 

paint_img("img"+i+".png",1,1,100,100) 

} 

나는 그림이 무작위로 drawen하는 예를 게시 할 수 없습니다.

Answer 1

임의 순서는 이미지가 임의 순서로로드되기 때문에 발생합니다.

당신은 약간 다른 방식으로이 문제를 해결할 수

-

먼저 배열에 이미지 요소를 저장하는 루프를 만들 :

var images = [],    /// image element array 
    count = 10,    /// number of images to load 
    loaded = count,   /// counter (decremented later) 
    i = 1; 

for (;i <= count;i++){ 
    var img = new Image(); /// create new image element 
    img.onload = done;  /// set load handler 
    img.src = "img"+ i +".png"; /// set source 
    images.push(img);   /// push to array 
} 

이것은 우리의 다음 단계에서 이미지의 순서를 보장합니다 . 우리는 이미지의 수는로드 계산 할 필요가 있도록 부하 핸들러가 공유 볼 수 있듯이 :

function done() { 
    loaded--;     /// decrement loaded counter 
    if (loaded === 0)   /// when done, draw images 
     drawImages(); 
} 

이미지가 우리가 그들을 그릴 수 있으며 당신이 기대하는 순서로 그려집니다로드 지금 때

를

function drawImages() { 
    for(var i = 0; i < images.length; i++) { 
     aaac.drawImage(images[i], 1, 1, 100, 100); 
    } 

    /// continue your script from here... 
} 

여기 예제에는 적어도 최종 코드에 추가해야하는 오류 처리기가 없습니다.

희망이 도움이됩니다.