HTML5帆布，Tileset不会显示

-2

下面是一个代码：

<!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链接添加代码，该链接可能会在以后的任何日期无效，在stackoverflow问题编辑器窗口中有设置将HTML/Javascript嵌入到您的问题中，观众甚至可以运行你的代码而不必离开这个ta湾 –

这里的问题是，图像尚未加载，当您尝试画它，你需要做的是等待，直到它被加载。

对于您可以使用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帆布，Tileset不会显示

回答

相关问题