HTML5キャンバス、タイルセットは表示されません

-2

私のタイルセットは表示されません。問題は何であるHTML5キャンバス、タイルセットは表示されません

ここにコードされています？それまで待つこと

<!DOCTYPE html> 
<html> 

<head> 
    <style> 
    body { 
     margin: 0px; 
     padding: 0px; 
    } 

    #mapa { 
     border: solid 1px; 
    } 
    </style> 
</head> 

<body> <canvas id="mapa" height="500px" width="500px"></canvas> 
    <script> 
    var canvas = document.getElementById('mapa'); 
    var ctx = canvas.getContext('2d'); 
    var trawa = new Image(); 
    trawa.src = "trawa.png"; 
    var mapa = [ 
     [0, 0, 0, 0, 0, 1, 0, 0], 
     [0, 0, 0, 0, 0, 0, 0, 0] 
    ]; 
    var posX = 0; 
    var posY = 0; 
    for (var x = 0; x < mapa.length; x++) { 
     for (var y = 0; y < mapa[x].length; y++) { 
      if (mapa[x][y] == 0) { 
       ctx.drawImage(trawa, posX, posY, 32, 32); 
      } 
      posX += 50; 
     } 
     posX = 0; 
     posY += 50; 
    } 
    </script> 
</body> 

</html>

出典

2017-04-13 Michi

、それはで何をするかを説明あなたがそれを持っている問題の文脈 –

将来の日付に無効になる可能性のあるpastebinリンクを介してコードを追加しないでください。あなたの質問に埋め込まれたHTML/Javascriptを入れるための機能がstackoverflow質問エディタウィンドウにあります。視聴者はこのtaを離れることなくコードを_run_することもできますb。 –

ここでの問題は、あなたが何をする必要があるか、あなたはそれを描画しようとすると、イメージがまだロードされていないということですがありますが読み込まれます。

次のよう trawa.onloadを使用することができますそのために

：あなたのコードに問題がある場合は、**質問に**それを含める

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <style> 
 
    body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    } 
 
#mapa 
 
{ 
 
    border: solid 1px; 
 
} 
 
    </style> 
 
</head> 
 
<body> 
 

 
<canvas id = "mapa" height = "500px" width= "500px"></canvas> 
 

 
<script> 
 

 
var canvas = document.getElementById('mapa'); 
 
var ctx = canvas.getContext('2d'); 
 

 
var trawa = new Image(); 
 
trawa.src = "trawa.png"; 
 

 

 
var mapa = [ 
 
[0,0,0,0,0,1,0,0], 
 
[0,0,0,0,0,0,0,0] 
 
]; 
 
var posX = 0; 
 
var posY = 0; 
 

 
trawa.onload = function(){ 
 
    for (var x = 0; x < mapa.length; x++){ 
 

 
    for (var y = 0; y < mapa[x].length; y++) 
 
    { 
 

 
     if (mapa[x][y] == 0) 
 
     { 
 
     ctx.drawImage(trawa, posX, posY, 32,32); 
 
     } 
 

 
    posX+=50; 
 

 
    } 
 
    posX = 0; 
 
    posY+=50; 
 
    } 
 

 
} 
 

 
</script> 
 

 
</body> 
 
</html>

出典

2017-04-13 14:33:16 Leo

HTML5キャンバス、タイルセットは表示されません

答えて

関連する問題