在畫布上相互繪製更多圖像

Question

我想繪製更多圖像，其中每個新圖像都覆蓋最老的圖像。 Iam使用Google chrome，但畫布代碼以隨機順序繪製圖像。

繪製圖像的功能是：

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(); 

} 

但是，當我試圖吸引更多的圖像他們的順序是隨機的。他們不是drawen爲了IMG1，IMG2，IMG3和比（例如）這個代碼IMG4：

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

這裏的例子沒有錯誤處理程序，您當然應該至少在最終代碼中添加錯誤處理程序。

希望這會有所幫助！