Canvas.drawImageは単純に画像を描画しません

Question

これまでのところうまく動作するタイルベースのマップを生成しようとしていますが、すべての「テスト長方形」を画像で置き換えて地面を表現すると、パス、いくつかの家など（この場合、すべての画像が同じ画像）、1つの画像が描画されるわけではありません。

私はここで間違っていますか？私もゼロ誤差を得る。

HERESにコード切り取ら：

// generate a large map  
    Map.prototype.generate = function(){ 
     var ctx = document.createElement("canvas").getContext("2d");   
     ctx.canvas.width = this.width; 
     ctx.canvas.height = this.height;   

     var rows = ~~(this.width/<?php echo $GAME['map']['tileSize'] + $GAME['map']['tileBorder']; ?>) + 1; 
     var columns = ~~(this.height/<?php echo $GAME['map']['tileSize'] + $GAME['map']['tileBorder']; ?>) + 1; 

     ctx.save(); 

     // Here i wanted to check if the image gets drawn right besides the player 
     var testImage = document.createElement('img'); // Also tried new Image(); 
     testImage.onload = (function() { 
      console.log(testImage + "-test"); 
      ctx.drawImage(testImage, 1000, 1000, <?php echo $GAME['map']['tileSize']; ?>, <?php echo $GAME['map']['tileSize']; ?>); 
     }()); 
     testImage.src = "http://192.168.0.140/img/terrain.png"; 

     var imgs = []; 
     var imgIndex = 0; 

     <?php echo "for (var y = 0, i = ".$tilesToLoad['xStart']."; i < ".($tilesToLoad['xStart'] + $GAME['map']['chunkSize'])."; y+=".($GAME['map']['tileSize'] + $GAME['map']['tileBorder']).", i++) {"; ?> 

      <?php echo "for (var x = 0, j = ".$tilesToLoad['yStart']."; j < ".($tilesToLoad['yStart'] + $GAME['map']['chunkSize'])."; x+=".($GAME['map']['tileSize'] + $GAME['map']['tileBorder']).", j++) {"; ?> 
       imgs[imgIndex] = document.createElement('img');     
       imgs[imgIndex].onload = (function() { 
        console.log(imgs[imgIndex] + "-" + imgIndex + "-" + x + "-" + y); 
        ctx.drawImage(imgs[imgIndex], x, y, <?php echo $GAME['map']['tileSize']; ?>, <?php echo $GAME['map']['tileSize']; ?>); 
       }()); 
       imgs[imgIndex].src = "http://192.168.0.140/img/terrain.png"; 
       imgIndex += 1; 
      } 
     } 

     ctx.restore(); 

     // store the generate map as this image texture 
     this.image = new Image(); 
     this.image.src = ctx.canvas.toDataURL("image/png");     

     // clear context 
     ctx = null; 
    } 

にconsole.log出力：

[object HTMLImageElement]-test 
[object HTMLImageElement]-0-0-0 
[object HTMLImageElement]-1-41-0 
[object HTMLImageElement]-2-82-0 
[object HTMLImageElement]-3-123-0 

Answer 1

あなたはIIFEとしてのonload関数を書かれているので、それが所望の効果を持っていません。 srcが代入される前にすぐに関数を実行していて、関数にonloadが割り当てられていません。

変更し、これに最初のonloadイベントの割り当て：

testImage.onload = function() { 
     console.log(testImage + "-test"); 
     ctx.drawImage(testImage, 1000, 1000, <?php echo $GAME['map']['tileSize']; ?>, <?php echo $GAME['map']['tileSize']; ?>); 
    }; 

私が行っているすべての外かっこが削除されます。 以降の割り当てのために同じ：

imgs[imgIndex].onload = function() { 
      console.log(imgs[imgIndex] + "-" + imgIndex + "-" + x + "-" + y); 
      ctx.drawImage(imgs[imgIndex], x, y, <?php echo $GAME['map']['tileSize']; ?>, <?php echo $GAME['map']['tileSize']; ?>); 
    }; 

これはオンロードイベントの前に実行された場合、その後、彼らはキャンバス上の画像を描画するために失敗するので、私は、ctx = null;割り当てを削除することをお勧め代わりに、あなたは キャッチされないでしょうTypeError：nullのプロパティ 'drawImage'を読み取ることができません。

また、Blindman67が指摘しているように、すべてのonloadイベントが発生した後にキャンバスからイメージを作成するには、変更が必要です。 これを行うには、this exampleと同様のカウンタを使用します。この場合、一連の画像がロードされた後に警告が表示されます。