我的 Javascript 瓦片地图不会绘制？

Question

这是我的脚本，我似乎无法弄清楚出了什么问题，我想绘制一个 12*12 的瓦片图，瓦片是 32px - 32px。当我运行页面时，瓷砖不绘制，我尝试使用 parse int 如下所示，但它仍然没有工作。

if(parseInt(mapArray[x][y]) == 0){
    ctx.drawImage(rockTile, posX, posY, tileSize, tileSize);
}

这是我创建的脚本。

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = (32 * 12);
canvas.height = (32 * 12);
document.body.appendChild(canvas);

var rockTile = new Image();
rockTile.src = "../Images/dc-dngn/floor/rect_gray0.png";
var tileSize = 32;
var posX = 0;
var posY = 0;

var mapArray = [
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];

$(document).ready(function(){
    drawMap();
});

function drawMap(){
    for(var x = 0; x < mapArray.length; x++){
        for(var y = 0; y < mapArray[x].length; y++){
            if(mapArray[x][y] == 0){
                ctx.drawImage(rockTile, posX, posY, tileSize, tileSize);
            }
            posX += 32;
        }
        posX = 0;
        posY += 32;
    }
}

如果有人能帮我画出我的瓷砖，将不胜感激，谢谢！

Answer 1

您必须等待图像加载。该图像不是 DOM 的一部分，因此等待加载文档无济于事。

您需要为image.onload 插槽放置一个处理程序，并在调用该代码时触发重绘。

正常程序是

1. 创建图像对象
2. 为其注册 onload 事件
3. 设置图片src值

只有当注册的事件被调用时，才能使用图像对象。

棘手的部分是，根据浏览器的不同，如果图像已经在缓存中，则设置 src 后图像可能会立即生效，因此当您不遵循正确的程序时，事情显然仍然有效（但他们当加载需要互联网访问时，在实际情况下将无法正常工作。

Answer 2

我可以看到您有两个主要问题：

1. 您正在访问 document.body 之前的定义。
2. 您可能在加载图像之前就在使用它。

下面是解决这两个问题的代码：

// variables are defined as global variables
var posX = 0;
var posY = 0;
var tileSize = 32;
var mapArray;
var canvas;
var ctx;
var rockTile;

$(function() {
    // document should be defined now
    canvas = document.createElement("canvas");
    ctx = canvas.getContext("2d");
    canvas.width = (32 * 12);
    canvas.height = (32 * 12);
    document.body.appendChild(canvas);

    mapArray = [
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    ];

    // wait until the image is loaded to draw
    rockTile = new Image();
    rockTile.onload = drawMap;
    rockTile.src = "../Images/dc-dngn/floor/rect_gray0.png";        
});

function drawMap(){
    posX = 0;
    posY = 0;
    for(var x = 0; x < mapArray.length; x++){
        for(var y = 0; y < mapArray[x].length; y++){
            if(mapArray[x][y] == 0){
                ctx.drawImage(rockTile, posX, posY, tileSize, tileSize);
            }
            posX += 32;
        }
        posX = 0;
        posY += 32;
    }
}

还要确保仔细检查您的图像路径。