Javascript 在基于JS-Tile的游戏中，未使用context.drawImage（）将图像加载到画布

我正在尝试使用canvas在JavaScript/HTML中创建一个平铺贴图。我正在使用两个55 x 55像素的.png图像文件作为草地和水的纹理

在数组“for循环”期间，此游戏的磁贴不会加载到画布中。这两个图像文件与.html页面位于同一文件夹级别

任何帮助都将不胜感激

var canvas=document.getElementById（'canvas'）；
var context=canvas.getContext（'2d'）；
变量映射数组=[
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
[0, 0, 0, 1, 1, 0, 0, 0, 0, 0]
[0, 0, 0, 1, 1, 0, 0, 0, 0, 0]
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];
var grass=新图像（）；
var water=新图像（）；
grass.src='grass_tile.png'；
water.src='water_tile.png'；
var-posX=0；
var-PosY=0；
对于（var i=0；i

#画布{
边框：1px纯黑；
}

游戏

这里有几点：

您忘记在多维数组中放置逗号

有些地方有var

PosY

，有些地方有

PosY

您应该等待图像加载，以便绘制它们

var canvas=document.getElementById（'canvas'）；
var context=canvas.getContext（'2d'）；
变量映射数组=[
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 1, 1, 0, 0, 0, 0, 0],
[0, 0, 0, 1, 1, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];
var grass=新图像（）；
var water=新图像（）；
grass.src=https://fyldegrass.co.uk/wordpress/wp-content/uploads/2016/04/Lytham-Ebay-Top2-128x128.jpg';
water.src='数据：image/jpeg；base64，/9j/4AAQSKZJRJABAAQAAAQABAD/2WCEAKGBxMTEHOTEXFHWGBOYGRGVGRUVFXGxFRCxGxFxGxFxGxFxGxFxGxFxGxFxFxGxFxFxGxFxFxFxGxFxFxGxFxFxGxFxFxGxFxFxFxGxFxFxFxGxFxFxFxFxFxFxFxFxGxFxFxFxGxFxFxFxFxGxFxFxGxFxFxFxGxFxFxFxFxFxGxFxFxFxFxFxFxGxFxFxFxGxGxFxFxGxFxFxFxGxFxFxFxF一个A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A LJF1PN2.一本书是一本书，一本书是一本书，一本书是一本书，一本书是一本书，一本书是一本书，一本书是一本书，一本书是一本书，一本书是一本书，一本书是一本书，一本书是一本书是一本书，一本书是一本书是一本书，一本书是一本书是一本书，一本书是一本书，一本书是一本书是一本书，一本书是一本书，一本书是一本书是一本书，一本书是一本书，一本书是一本书是一本书，一本书是一本书，一本书是一本书，一本书，一本书是一本书，一本书是一本书，一本书是一本书，一本书，一本书是一个关于关于关于关于关于关于关于关于关于关于关于关于一个关于关于关于B2FXB+9/fg9VN8.文中提出了一种新的研究方法。文中提出了一种新的研究方法，即：1.文中提出了一种新的研究方法。文中提出了一种新的研究方法。文中给出了一种新的研究方法，即：文中提出了一种新的研究方法，即：文中提出了一种新的研究方法。文中提出了一种新的研究方法。文中给出了一种新的研究方法。文中给出了一种新的文中给出了文中给出了文中的一个研究的研究内容。文中给出了文中给出了文中的一个文中给出了文中关于一个关于一个文中关于关于一个关于一个关于一个关于一个关于某一个非非非非军事军事军事力量的非非非军事力量，非军事力量，非非军事军事军事军事力量，非军事力量，非军事力量，非军事力量，非军事力量，非军事力量，非军事力量，非军事力量，非军事力量，非军事力量Okacdilsotfn8hbfu8g1w0ymgm2cwmvqyslldphb一种新的研究方法，一种新的研究方法，一种新的研究方法，一种新的研究方法，一种新的研究方法，HCP6，JC6，6，6，一个新的研究，一种新的GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGTM3KDMG16BKWBRO00VT8K/ATifJBPQMOILPQQJEMBJUMSR8KJ8YCTQ1SQFELDLTWIBCTG6CMW7V0JCJ1Z92XWMESJYWRLX4R9K3WXHPKFSVHPSRVSPSRV7R8KYRTWWDDLCFPSNP15NGYPBCPWUMQBFMDYTH0ZDSTC6EJMKZLM5Y2ZY2SawMMXeDeane+7EG7fY+UDA7AKGKWZLE8YPTFR2LDY9NPBQTPK1MLP9/f3ZRL+YBQQQ0Q0QQQ6EU/IhdUk+A1VUK7V8VZYK7V8VZYZYK7VZYZYK7V9V9VZYZYZYZYKKKKKZYZYZYKKKKKKKKK8YKK8YY；
var-posX=0；
var-posY=0；
grass.onload=函数（）{draw（）；}；
函数绘图（）{
对于（var i=0；i

#画布{
边框：1px纯黑；
}

游戏

是

posY

还是

posY

？我假设其中一个是错别字——但这种错别字也存在于您的原始代码中吗？您必须等待图像加载后才能绘制它们。谢谢Robin，posY的错别字写得很对。@PatrickEvans，既然有两个分块，您能建议处理超载的最佳方法吗？我已经找到了等待加载一个图像的示例，但不确定如何在for循环的上下文中为两个图像输入该示例。请参阅加载/等待多个图像的示例这很有效…我的第一篇文章，我被帮助和回复速度所震撼。很抱歉所有的拼写错误，但感谢您花时间指出它们，在尝试使其正常工作2天后，无法看到树木的树木。