用一个onload绘制图像数组？

Question

我想用一个 onload 函数画一行图像。我试过这段代码

for(i = 0; i < 8; i++){
var canvas = document.getElementById('ctx');
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.src = "thumb.png";
imageObj.setAtX = i * 10;
imageObj.setAtY = i * 10;
imageObj.onload = function() {
context.drawImage(this, this.setAtX, this.setAtY);
};
}

（在 java-脚本中）

Answer 1

// put the paths to your images in imageURLs[]
var imageURLs=[];  
imageURLs.push("image1.png");
imageURLs.push("image2.png");

// the loaded images will be placed in imgs[]
var imgs=[];

var imagesOK=0;
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];
    }      
}

function start(){

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

}

Answer 2

只需重复使用图像，当图像加载后然后循环绘制它 - 像这样重新组织：

var canvas = document.getElementById('ctx');
var context = canvas.getContext("2d");
var imageObj = new Image();

imageObj.onload = function() {
    for(var i = 0; i < 8; i++) context.drawImage(this, i * 10, i * 10);
    // .. call next step from here
};

imageObj.src = "thumb.png";

尽量避免在本机对象上设置新属性。在这种情况下，您不需要它，只需在图像加载后进行迭代即可。

Answer 3

var imageObj = [];
for(var i=0;i<images.length;i++){
  iy = parseInt(i/6) * 200;
  ix = parseInt(i%6) * 200;
  imageObj[i] = new Image();
  imageObj[i].src = images[i];
  // to set additinal parameter
  imageObj[i].ix = JSON.parse(JSON.stringify(ix));
  imageObj[i].iy = JSON.parse(JSON.stringify(iy));
  // console.log(imageObj);
  imageObj[i].onload = function() {
    console.log(this.ix);
    console.log(this.iy);
    ctx.drawImage(this, this.ix, this.iy, 200, 200);
  };
}

用一个onload绘制图像数组？

draw array of images with one onload?

javascript

html5-canvas