drawImage in JavaScript (Canvas)

drawImage in JavaScript (Canvas)

本文关键字：Canvas JavaScript in drawImage      更新时间：2024-03-31

我有一个图像对象数组，其中包含所有必要的信息，如路径、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函数之前，每个图像的所有信息都是正确的，但由于某种奇怪的原因，它不显示除数组中的"最后一个"（最后弹出的那个）之外的图像

您的图像加载代码有错误。

每个图像都需要一段时间才能加载，然后您已经用另一个新的图像（）覆盖了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);
    }
}

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

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);
    }
}

我不明白为什么要使用pop（）来获取对象数据。相反，您可以使用shapes[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); 
        }
    }
}
相关文章：