如何将多个图像添加到 html5 画布

Question

我正在尝试将多个图像添加到Html5 画布，但每次我尝试删除最后一个图像并显示最新的图像时，它都会失败。这是我的代码：

var imgArray = ['abc.png','455.jpg'];
    for(i = 0; i < 2; i++){
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext("2d");
        var imageObj = new Image();
        imageObj.src = imgArray[i];
        imageObj.onload = function() {
        context.drawImage(this,0,0);
    };
}

如果我运行此代码，它会在画布上显示第二个图像并删除第一个图像。有没有办法保留两个图像？

Answer 1

实际上 onLoad 总是使用变量的最后一个值。所以在.之前存储（计算）img x, y 坐标。像这样：

imageObj.setAtX = i * 10;
imageObj.setAtY = i * 10;
imageObj.onload = function() {
     context.drawImage(this, this.setAtX, this.setAtY);
};