javascript - 画像を動的に呼び出すにはどうすればよいですか?

Question

を呼び出したい...という名前のオブジェクトを使用pic1しました。pic2picnimage

imageオブジェクトのサンプル コード。

for (var src in images) {
    image[src] = new Image();
    image[src].onload = function () {
        counter++;
    };
    image[src].src = images[src];
}

 

image.pic1,image.pic2 ......image.picn

image: Object 画像オブジェクトを呼び出すためにいくつかの方法を使用しようとしています:

col = 1; image.pic+col: NaN image.'pic'+col: image.'pic'+'1': image.pic+'1': "undefined1" image.[pic+col] image.[pic1]:

次のコードを実行するには:

for(var col = 1; col < n ; col++) {
    CanvasA.drawImage(image.pic1, x, y, 300, 300);
    //CanvasA.drawImage(image.pic2, x, y, 300, 300);
    //...............
    //...............
    //CanvasA.drawImage(image.picn, x, y, 300, 300);
}

これはコードの一部です:

for(var squer = 1;squer < 8 ; squer++ ) {
    y = (squer * 100)-100;

    for(var col = 0; col < 14 ; col++) {
        if (map.raw[squer][col+1] == 1) {
            x = ((col+1) * 100)-100;
            CanvasA.drawImage(image.LEAF1, x, y, BACKGROUND.LEAF.w, BACKGROUND.LEAF.h);
            //CanvasA.fillRect(x,y,100,100);
        }   
    }
}

Answer 1

タイプミスがあります。「画像」は「画像」にする必要があります。

試す：

var counter = 0;

for (var src in image) {
    image[src] = new Image();
    image[src].onload = function () {
        counter++;
    };
    image[src].src = images[src];
}

Answer 2

新しく作成した画像を別の配列にプッシュします

var imageObjects = [];
for (var src in images) {
    image[src] = new Image();
    ...
    imageObjects.push( image[ src ] );
}

それから

for(var col = 1; col < n ; col++){
    for ( var i; i < imageObjects.length; i ++ ){
        CanvasA.drawImage( imageObjects[i], x, y, 300, 300 );
    }
}

Answer 3

そのはず

image.["pic" + col]