HTML5 Canvas，Tileset 不会显示答案

【问题标题】：HTML5 Canvas, Tileset won't show upHTML5 Canvas，Tileset 不会显示
【发布时间】：2017-04-13 13:47:06
【问题描述】：

我的图块集不会显示。有什么问题？

这是一个代码：

<!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>

【问题讨论】：

请不要通过 pastebin 链接添加可能在未来任何日期失效的代码，stackoverflow 问题编辑器窗口中有一些工具可以将 HTML/Javascript 嵌入到您的问题中，观众甚至可以运行您的代码，而无需离开此选项卡。

标签： javascript dictionary canvas

【解决方案1】：

这里的问题是当你尝试绘制它时图像还没有加载，你需要做的就是等待它加载。

为此，您可以使用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>

【讨论】：