动态添加到画布的图像是'；t加载JAVASCRIPT

我尝试将图像裁剪成多个部分，然后在画布上显示。 我将坐标保存在一个数组中，如arr[I].x，arr[I].y，arr[I].cropHeight，arr[I].cropWidth。如果我有三个裁剪的部分，我将在数组中有三个元素

当我对数组进行排序时，我想创建画布，并将其添加到我拥有的一个div中，ID为“canvasList”

我重复如下：

for(var i = 0; i < arr.length; i++)
            {
                var canvas = document.createElement('canvas');
                canvas.id = "canvas"+ arr[i].x + arr[i].y;
                canvas.width = arr[i].width;
                canvas.height = arr[i].height;
                var context = canvas.getContext("2d");
                var imageObj = new Image();
                imageObj.myCustomData = {
                                            x:arr[i].x, 
                                            y:arr[i].y,
                                            wi: arr[i].width,
                                            he: arr[i].height
                                        };
                imageObj.src = 'example.jpg';
                imageObj.onload = function () {
                    var sourceX = this.myCustomData.x;
                    var sourceY = this.myCustomData.y;
                    var sourceWidth = this.myCustomData.wi;
                    var sourceHeight = this.myCustomData.he;
                    var destWidth = sourceWidth;
                    var destHeight = sourceHeight;
                    var destX = 0;
                    var destY = 0;
                    context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
                };
                document.getElementById('canvasList').appendChild(canvas);
            }

for（变量i=0；i

问题是，当arr中有多个对象时，页面中只显示最后一个对象，我不明白为什么

请帮帮我。 多谢各位

---

这一行是问题的根源：

context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);

在循环中的每个迭代中，您都将新的画布上下文定义为

context

。加载图像时（异步），它将在

上下文

上呈现所有裁剪的图像

由于正在异步加载图像，因此循环将在加载图像之前完成，这意味着使用image.onload函数的

上下文

变量等于最后一个上下文集=最后一个裁剪对象

因此，所有image.onload函数都使用最后设置的上下文渲染图像

修复

imageObj.myCustomData = {
    x:arr[i].x, 
    y:arr[i].y,
    wi: arr[i].width,
    he: arr[i].height,
    context: context
};

将上下文添加到自定义数据对象

并使用设置的上下文渲染图像：

this.myCustomData.context.drawImage( .. )

小提琴：

编辑

当然，最好只加载一次图像：

---

你真的需要创建单独的画布吗？不需要，但如果我使用同一个画布，我想我必须将画布的使用量（宽度和高度）保存在一个变量中，再加上裁剪部分的宽度和高度是可变的，这似乎不是一个好主意，我想我现在明白了。我认为加载不会有问题，因为我没有将代码放入.onload方法。无论如何，我想我必须对这个问题多研究一点，这是关于全局变量的。如果您正在使用这些错误，则很容易发生这些错误。。。祝你好运：）