HTML 5 Canvas 在其他图像上绘制图像

【问题标题】：HTML 5 Canvas draw image over other imageHTML 5 Canvas 在其他图像上绘制图像
【发布时间】：2011-06-15 05:30:27
【问题描述】：

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

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

【问题讨论】：

我认为需要一些代码才能回答这个问题。

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

【讨论】：