为什么我的 drawChar 函数的 drawImage 没有显示？答案

【问题标题】：Why is my drawChar function's drawImage not showing?为什么我的 drawChar 函数的 drawImage 没有显示？
【发布时间】：2019-05-10 08:59:37
【问题描述】：

首先，我正在尝试使用 HTML5 画布和 Javascript 为 2d 游戏开发一个非常简单的平铺地图引擎，除了我的第二个 drawChar 函数的 drawImage() 没有显示在画布上之外，一切似乎都运行良好.我知道网址很好，我已经检查了丢失的字符等，但无法弄清楚。代码如下。任何帮助表示赞赏。

附：我知道大部分代码不是“现代”或“最佳实践”，我仍在学习，只是想了解为什么会发生此错误。谢谢。

<canvas id="canvas" width="1000" height="500" style="border: 2px solid black; margin: 10px auto;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var draw=canvas.getContext('2d');

var tileSize=canvas.height/10;
var mapLength=canvas.width/tileSize;
var tilex=0;
var tiley=0;

var tile1= new Image();
var tile2= new Image();
var charImg= new Image();

tile1.src='https://raw.githubusercontent.com/daveboy87/Jscript-TileEngine/master/tile_sky.jpg';

tile2.src='https://raw.githubusercontent.com/daveboy87/Jscript-TileEngine/master/tile_ground.jpg';

charImg.src='https://raw.githubusercontent.com/daveboy87/Jscript-TileEngine/master/player.jpeg';



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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 1, 1]
];





function drawMap() {

for (var y=0; y<mapLength; y++){
for (var x=0; x<tileSize; x++){


tilex=x*tileSize;
tiley=y*tileSize;


if (parseInt(mapArray[y][x]) == 0) {

draw.drawImage(tile1, tilex, tiley, tileSize, tileSize);   }

if (parseInt(mapArray[y][x]) == 1) {

draw.drawImage(tile2, tilex, tiley, tileSize, tileSize);   }

                              }
                              }
               }


function drawChar(){
draw.drawImage(charImg, 300, 200, tileSize, tileSize);     }


function nextFrame(){
draw.clearRect(0, 0, canvas.width, canvas.height);
drawMap();
drawChar();
}

setInterval(nextFrame, 1000);

【问题讨论】：

第二个drawImage指的是什么？具体说明您的问题。
已编辑。谢谢。
请尝试：function drawMap() { for (var y = 0; y < mapArray.length; y++) { for (var x = 0; x < mapArray[0].length; x++) {....
感谢您的想法，是的，原来我的错误出在我的 for 函数中。
如果您的问题的答案令人满意，您可以单击答案旁边的空白绿色复选标记以帮助其他人找到它（并给我虚假的互联网积分）

标签： javascript html html5-canvas drawimage tile-engine

【解决方案1】：

您正在检查 mapArray[y][x] - 但 y 和 x 与 mapArray 的大小无关，因此您正在检查不存在的元素，并收到 Javascript 错误，这会阻止程序执行。

您应该保持 Chrome 开发者工具打开，这样您就可以看到 Javascript 错误，这将在这里向您显示问题。

【讨论】：