在画布中绘制更多图像答案

【问题标题】：Draw more images in canvas over each other在画布中绘制更多图像
【发布时间】：2014-02-05 18:29:09
【问题描述】：

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

绘制图像的函数是：

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 的顺序绘制的：

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

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

}

我无法发布图片以随机顺序绘制的示例。

【问题讨论】：

标签： canvas drawimage

【解决方案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...
}

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

希望这会有所帮助！

【讨论】：