HTML5 Canvas在另一个图像上绘制图像

Question

我想要在一个画布上绘制两个图像。问题是我绘制的第一张图片可能比第二张图片加载时间更长。由于在onload事件上绘制图片，因此可能发生第一图像被绘制在第二图片之上。

这不是我想要的，我总是希望在第一张图像的顶部绘制第二张图像。有什么想法吗？

Answer 1

var imgSrcs = ['url1', 'url2']; // <- put image URLs here

var imgs = [];
var loaded = 0;
var loadCallback = function () {
    loaded++;
    if (loaded == imgSrcs.length) {
        // draw imgs in correct order
    }
};

for (var i = 0; i < imgSrcs.length; i++) {
    imgs[i] = new Image();
    imgs[i].addEventListener('load', loadCallback, false);
    imgs[i].src = imgSrcs[i];
}