HTML 5 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];
}