Question

我尝试在每个图像加载后创建一个要在画布上显示的Image数组。没有错误，没有抽奖......

    var x=...
var y=...
var canvas = document.getElementById(sCanvasName);
var context = canvas.getContext('2d');

var imageCardObj = [];

//vCards contains the images file names
for (var k=0;k<vCards.length;k++){
    imageCardObj[k] = new Image();

    var func = function(){
            var c = arguments[3];
            try{                
                c.drawImage(arguments[0], arguments[1], arguments[2]);
            }catch(e){
                alert(e.message)
            }
        }

        imageCardObj[k].onload = func(imageCardObj[k], x, y, context);

        imageCardObj[k].src = "res/img/"+vCards[k].trim()+".png";   

        x+=40;
    }

Answer 1

您正在调用func()处理程序并将结果提供给图像的onload处理程序。这样做不会那么好..你不能将那些参数传递给处理函数。

试试这个：

var func = function(){

    // "this" will be the current image in here

    var c = arguments[3];
    try{                
        c.drawImage(this, x, y); // you need to reference x and y
    }catch(e){
        alert(e.message)
    }
}

imageCardObj[k].onload = func;  // only a reference here

如果你需要不同的x和y，那么你需要在侧面维护它们，或者在一个额外的数组中，或者使用对象来嵌入图像，它的x和y，并使用url来识别内部的图像。 func()回调。

另请注意，加载顺序可能会因最后加载的图像在第一张图像之前完成而有所不同，因此当您绘制图像时，它们可能不会以相同的顺序显示。

您可能希望这样做：

var files = [url1, url2, url, ...],
    images = [],
    numOfFiles = files.length,
    count = numOfFiles;

// function to load all images in one go
function loadImages() {

    // go through array of file names
    for(var i = 0; i < numOfFiles; i++) {

        // create an image element
        var img = document.createElement('img');

        // use common loader as we need to count files
        img.onload = imageLoaded;
        //img.onerror = ... handle errors too ...
        //img.onabort = ... handle errors too ...

        img.src = files[i];

        // push image onto array in the same order as file names
        images.push(img);
    }
}
function imageLoaded(e) {

    // for each successful load we count down
    count--;
    if (count === 0) draw(); //start when all images are loaded
}

然后您可以在图像加载后开始绘图 - 图像现在与原始阵列的顺序相同：

function draw() {
    for(var i = 0, img; img = images[i++];)
        ctx.drawImage(img, x, y); // or get x and y from an array
}

希望这有帮助！

Answer 2

这是最终（工作）版本

var x=...
var y=...
var canvas = document.getElementById(sCanvasName);
var context = canvas.getContext('2d');
var imageCardObj = [];

    for (var k=0;k<vCards.length;k++){

        imageCardObj[k] = new Image();
         imageCardObj[k].xxx=x;

        var func = function(){              

            try{                
                context.drawImage(this, this.xxx, yStreet);                 
            }catch(e){
                alert(e.message)
            }
        }

        imageCardObj[k].onload = func;      
        imageCardObj[k].src = 'res/img/'+vCards[k].trim()+".png";   
        x +=40;

加载到数组后在画布上绘制图像

2 个答案: