我的Javascript平铺贴图不会绘制？

这是我的脚本，我似乎不知道出了什么问题，我想画一个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;
    }
}

var canvas=document.createElement（“canvas”）；
var ctx=canvas.getContext（“2d”）；
画布宽度=（32*12）；
canvas.height=（32*12）；
document.body.appendChild（画布）；
var rockTile=新图像（）；
rockTile.src=“../Images/dc-dngn/floor/rect_-gray0.png”；
var tileSize=32；
var-posX=0；
var-posY=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, 0]
];
$（文档）.ready（函数（）{
drawMap（）；
});
函数drawMap（）{
对于（var x=0；x

---

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

必须等待图像加载。该图像不是DOM的一部分，因此等待加载文档不会有帮助

您需要为

image.onload

插槽放置一个处理程序，并在调用该代码时触发重画

正常程序是

创建图像对象

为其注册onload事件

设置图像

src

值

只有在调用注册的事件时，才能使用image对象

---

棘手的部分是，根据浏览器的不同，如果图像已经在缓存中，则在设置

src

后，图像可能会立即生效，因此，如果您不遵循正确的过程，事情显然会正常工作（但在实际情况下，当加载需要internet访问时，图像不会正常工作）.

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

在定义文档正文之前，您正在访问它

您可能在加载图像之前使用了该图像

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

// 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;
    }
}

//变量定义为全局变量
var-posX=0；
var-posY=0；
var tileSize=32；
向量映射数组；
var帆布；
var-ctx；
var瓷砖；
$（函数（）{
//现在应该定义文档
canvas=document.createElement（“canvas”）；
ctx=canvas.getContext（“2d”）；
画布宽度=（32*12）；
canvas.height=（32*12）；
document.body.appendChild（画布）；
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]
];
//等待图像加载后再绘制
rockTile=新图像（）；
rockTile.onload=绘图地图；
rockTile.src=“../Images/dc-dngn/floor/rect_-gray0.png”；
});
函数drawMap（）{
posX=0；
posY=0；
对于（var x=0；x

---

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

您确定这应该是jquery标记的吗？我在这里没有看到任何jquery？@Kolban

$（文档）。准备好了（

是jQuery@TheAdamGaskins谢谢你，先生，我错过了。我通常希望在那里看到更多的jQuery，而不仅仅是一个onload处理程序。+1--@MitchWardle，我用我最初的小提琴来使用这种方法（并删除了我原来的方法，因为它缺少此答案中解释的关键步骤）。现在，岩石网格显示在初始加载时。即使没有jQuery，它也可以在我的工作站上的单独HTML文件中工作。下面是一个新的、正确工作的小提琴：@TroyGizzi您的代码正在加载时执行。OP的代码正在onDomReady上执行。

文档

对象从JavaScript开始执行时就可用。@G你说得对。我应该把

document.body

放进去。