Question

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

绘制图片的功能是：

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)

}

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

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

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

希望这有帮助！

在画布上绘制更多的图像

1 个答案: