JavaScript中的drawImage（画布）

Question

我有一个图像对象数组，其中包含所有必要的信息，如路径、x、y、w、h。现在我想在画布上循环绘制所有这些图像.. 但是当我这样做时，它只绘制第一张图像。代码如下：

for(var i=0; i<shapes.length; i++)
{
    var A = shapes.pop();
    if(A.name == 'image' && A.pageNum == pNum)
    {
        var img = new Image();
        img.src = A.path;
        img.onload = function() {
            context.drawImage(img, A.x, A.y, A.w, A.h); 
        }
    }
}

我检查了形状数组中的所有信息...在 if 条件内，在调用 drawImage 函数之前，每个图像的所有信息都是正确的，但是由于某些奇怪的原因，它不显示图像，除了“最后一个”数组（最后弹出的那个）

Answer 1

我不明白您为什么要使用 pop() 来获取对象数据。您可以改为使用 shape[i] 表示法访问每个对象，并且作为奖励，在每个对象中存储图像句柄：

for(var i=0; i<shapes.length; i++)
{
    if(shapes[i].name == 'image' && shapes[i].pageNum == pNum)
    {
        shapes[i].img = new Image();
        shapes[i].img.src = shapes[i].path;
        shapes[i].img.onload = function() {
            context.drawImage(shapes[i].img, shapes[i].x, shapes[i].y, shapes[i].w, shapes[i].h); 
        }
    }
}

Answer 2

您的图片加载代码有问题。

每张图片都需要一些时间来加载，然后你已经用另一个 new Image() 覆盖了 var img;

这是一个图像加载器的示例，它仅在所有图像都已加载并准备好绘制后执行：

[ 警告：未经测试的代码——可能需要进行一些调整！ ]

// image loader

var imageURLs=[];  // put the paths to your images in this array
var imagesOK=0;
var imgs=[];
imageURLs.push("");
loadAllImages(start);

function loadAllImages(callback){
    for (var i=0; i<imageURLs.length; i++) {
        var img = new Image();
        imgs.push(img);
        img.onload = function(){ 
            imagesOK++; 
            if (imagesOK>=imageURLs.length ) {
                callback();
            }
        };
        img.onerror=function(){alert("image load failed");} 
        img.crossOrigin="anonymous";
        img.src = imageURLs[i];

        // note: instead of this last line, you can probably use img.src=shapes[i].path;
    }      
}

function start(){

    // the imgs[] array holds fully loaded images
    // the imgs[] are in the same order as imageURLs[]

    for(var i=0;i<shapes.length;i++){
        var shape=shapes[i];
        context.drawImage(imgs[i],shape.x,shape.y,shape.w,shape.h);
    }

}

Answer 3

这是某种闭包的问题...例如，在加载图像之前完成循环之类的。对我有用的解决方案是将所有图像加载代码放在一个单独的函数中并从循环中调用该函数：

if(A.name == 'image' && A.pageNum == pNum)
{
    displayImage(A.path, A.x, A.y, A.w, A.h);

}
function displayImage(path, x, y, w, h)
{
    var img = new Image();
    img.src = path;

    img.onload = function() {
        context.drawImage(img, x, y, w, h);
    }
}