javascript 配列にdrawImageを代入できない。

●やりたい事
drawImagを配列に入れたい

●状況
画像はcanvasに描かれているのですが、配列に情報が入ってないです。
デベロッパーツールで確認すると配列が無いとされて処理が進んでいきます。
どこが間違っているかヒントをいただけないでしょうか？
考え方がおかしい等、指摘をいただけるとなおありがたいです。

<body> <canvas id="map" width="2000px" height="2000px"></canvas> </body> <script> window.onload = () =>{ let map = document.getElementById("map"); let mapd = map.getContext("2d"); let loadCount = 0; let imageUrls = [//画像パスの配列 "../../../public/image_folder/image1.png", "../../../public/image_folder/image2.png", "../../../public/image_folder/image3.png" ] var images = new Array();//image要素を入れる配列 let i; let j;

    for(let i = 0 ; i < imageUrls.length; i++){//配列を回してimage要素を生成,実行
         images[i] = document.createElement("img")
         images[i].src = imageUrls[i]
         images[i].onload = () =>{
             if(i == 0 )
             makeMap(mapd,images[i])
             else if (i == 2)
             startChara(mapd,images[i],0,32,32,1010,1960,32,32)
             else
             return;

             
         }
       
      
    }
    
  
      

}
//MAPimageを繋ぐ mapCell配列にrow配列を入れる
function makeMap(mapd,image){
    
    const width = 40;
    const height = 40;
    let row = new Array();//処理用
    let mapCell = new Array();//本体 map[recode[x]]
    let imageData;

    for(let field = 0; field < width; field ++){
        row = new Array();//行の配列
        for(cel = 0; cel < height; cel ++){
            sxI = random(7)*100
            row[cel] = imageMake(mapd,image,sxI,100,100,cel*50,field*50,50,50)
            
        }
        mapCell.push(row)
    }
        return mapCell
}

//image生成
function imageMake(mapd,image,sxI,sw,sh,dxI,dyI,dw,dh){
    let imagePath = mapd.drawImage(image,sxI,0,sw,sh,dxI,dyI,dw,dh)
    return imagePath
}



//キャラクターの初期位置
function startChara(mapd,image,sxI,sw,sh,dxI,dyI,dw,dh){      
     
    let chara = imageMake(mapd,image,sxI,sw,sh,dxI,dyI,dw,dh)
                        
    return chara 
}
//乱数
function random(int){
    let i = Math.floor(Math.random()*int)
    return i 
}

</script>

PlugOut777

2022/03/14 06:15

単にmakeMap()の返り値を受け取っていないように見えますが……。あと表記が崩れて見難いので、編集で直してください。

行動規範の内容に同意します

回答1件

ベストアンサー

以下、`for (var i = 0;` の場合と勘違いした間違った回答です。参照しないでください。

js
1    for(let i = 0 ; i < imageUrls.length; i++){//配列を回してimage要素を生成,実行
2         ...
3         images[i].onload = () =>{
4             if(i == 0 )

NをimageUrls.length とすると、このコードではN個のonloadハンドラが単一の変数 i を参照します。そのハンドラが呼ばれるのは for ループが終わった後なので、ハンドラ内では i は常に N になります。

iの判定をonloadハンドラの外で行いましょう。

js
1    for (let i = 0 ; i < imageUrls.length; i++){ //配列を回してimage要素を生成,実行
2         images[i] = document.createElement("img")
3         images[i].src = imageUrls[i];
4         if (i == 0) {
5             images[i].onload = () => {
6                 makeMap(mapd, images[0]);
7             };
8         } else if (i == 2) {
9             images[i].onload = () => {
10                 startChara(mapd, images[2], 0, 32, 32, 1010, 1960, 32, 32);
11             };
12         }