Canvas 在画布上相互绘制更多图像

我正在尝试绘制更多的图像，每一张新图像都覆盖了最古老的图像。我使用谷歌浏览器，但画布代码以随机顺序绘制图像

绘制图像的功能是：

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

}

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

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

}

但当我尝试绘制更多图像时，它们的顺序是随机的。它们不是按img1、img2、img3和img4的顺序付款人（例如）此代码：

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

}

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

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

}

---

对于（i=1；i随机顺序是因为图像以或多或少的随机顺序完成加载

你可以用稍微不同的方法来解决这个问题-

首先创建一个将图像元素存储在数组中的循环：

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 drawImages() {
    for(var i = 0; i < images.length; i++) {
        aaac.drawImage(images[i], 1, 1, 100, 100);
    }

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

函数drawImages（）{
对于（var i=0；i

这里的示例没有错误处理程序，您当然应该至少在最终代码中添加错误处理程序

希望这有帮助