Javascript HTML5画布，Tileset赢得'；我没有出现_Javascript_Dictionary_Canvas

Javascript HTML5画布，Tileset赢得'；我没有出现

javascript dictionary canvas

Javascript HTML5画布，Tileset赢得'；我没有出现,javascript,dictionary,canvas,Javascript,Dictionary,Canvas,我的tileset不会出现。有什么问题吗下面是一个代码： <!DOCTYPE html> <html> <head> <style> body { margin: 0px; padding: 0px; } #mapa { border: solid 1px; } </style> </head> <body>

我的tileset不会出现。有什么问题吗

下面是一个代码：

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


身体{
边际：0px；
填充：0px；
}
#马帕{
边框：实心1px；
}
var canvas=document.getElementById（'mapa'）；
var ctx=canvas.getContext（'2d'）；
var trawa=新图像（）；
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；
对于（var x=0；x

这里的问题是，当您尝试绘制图像时，图像尚未加载，您需要做的是等待图像加载

为此，您可以按如下方式使用

trawa.onload

：


身体{
边际：0px；
填充：0px；
}
#马帕
{
边框：实心1px；
}
var canvas=document.getElementById（'mapa'）；
var ctx=canvas.getContext（'2d'）；
var trawa=新图像（）；
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=函数（）{
对于（var x=0；x

如果您的代码有问题，请将其包含在问题中，并解释它对问题上下文的作用。请不要通过pastebin链接添加代码，该链接在将来的任何日期都可能失效。stackoverflow问题编辑器窗口中提供了将HTML/Javascript嵌入问题的功能，观众甚至可以运行您的代码，而不必离开此选项卡。