html5画布中的多个图像未按正确顺序堆叠

我将多个png透明图像添加到html5画布上，一个在另一个之上，但它们没有按正确的顺序堆叠（由包含这些图像的url的数组定义）

我在其他讨论中读到，这可能是一个关闭问题，但目前还没有解决方案

这是我的代码：

function drawCanvas() {
  var canvas;
  var context;
  var imgArray = [
    'images/img1.png',
    'images/img2.png',
    'images/img3.png',
    'images/img4.png',
    'images/img5.png',
    'images/img6.png'
  ];
  canvas = document.getElementById('myCanvas');
  context = canvas.getContext("2d");
  for (var i = 0; i < imgArray.length; i++) {
    var img = new Image();
    img.src = imgArray[i];

    var drawTee = function(i, context, canvas) {
      return function() {
        console.log(i, 'loaded')
        context.drawImage(this, 0, 0);
      }
    };
    img.onload = drawTee(i, context, canvas);
  }
};

函数drawCanvas（）{
var帆布；
var语境；
var Imgaray=[
“images/img1.png”，
'images/img2.png'，
“images/img3.png”，
“images/img4.png”，
“images/img5.png”，
“images/img6.png”
];
canvas=document.getElementById（'myCanvas'）；
context=canvas.getContext（“2d”）；
对于（变量i=0；i

---

有人能帮我吗？

问题是画布上图像的顺序取决于图像完成加载的顺序

解决方案：等待所有图像完成加载，然后将它们添加到画布

function drawCanvas() {
  var canvas;
  var context;
  var imgArray = [
    'images/img1.png',
    'images/img2.png',
    'images/img3.png',
    'images/img4.png',
    'images/img5.png',
    'images/img6.png'
  ];
  var images = [];
  canvas = document.getElementById('myCanvas');
  context = canvas.getContext("2d");
  var loadCount = 0;
  for (var i = 0; i < imgArray.length; i++) {
    var img = new Image();
    img.src = imgArray[i];
    images.push(img);

    img.onload = function() {
       if(++loadCount == imgArray.length) {
          for(var i=0; i < imgArray.length; i++) {
             context.drawImage(images[i], 0, 0);
          }
       }
    };
  }
};

函数drawCanvas（）{
var帆布；
var语境；
var Imgaray=[
“images/img1.png”，
'images/img2.png'，
“images/img3.png”，
“images/img4.png”，
“images/img5.png”，
“images/img6.png”
];
var图像=[]；
canvas=document.getElementById（'myCanvas'）；
context=canvas.getContext（“2d”）；
var loadCount=0；
对于（变量i=0；i