为什么图像会被覆盖？

Question

我正在学习 Javascript 和 Canvas。在这种情况下请帮助我。我想用几个冒号画一行图像，最后一个总是覆盖前一个。

示例如下：

  function main(){
     contains Canvas creating
        canvas = document.createElement('canvas');
    canvas.width = WIDTH;
    canvas.height = HEIGHT;
    ctx = canvas.getContext('2d');

    document.body.appendChild(canvas);

     and init();
    }

// Row 是带有坐标和drawImage 方法的我的构造函数。 DrawImage 接受图像数组；

function Row(x,y){
            var _this = this;
            _this.x = x;
            _this.y = y;

            this.drawImage = function(img2){

                img.onload = function(){
                    for(var i = 0; i < img2.length; i+=1){
                    ctx.drawImage(img2[i], _this.x, this.y + i * canvas.height / 4, canvas.width / 5, canvas.height / 4);
                    console.log(_this.x);

                    };
                };
            };
        };

// 例如我创建两行并设置它们不同的坐标。如果画布，我希望它们处于不同的侧面； var first = new Row(0, 0); var second = new Row(350, 0);

   function init(){

        loadImage(imgArray);

        // IMG is the arrays with images links
        // New instances takes the different coordinates, but the last is overwriting the previous. Why?

        first.drawImage(IMG);
        second.drawImage(IMG);


    };

Answer 1

当您调用first.drawImage 时，这会设置img.onload 处理程序。当您调用second.drawImage 时，这会覆盖img.onload 处理程序。尝试改用img.addEventListener('load', ...)，以便调用两个回调。