Javascript HTML5画布图像渲染

第一次在这里张贴海报，但绝对不是第一次阅读

我的问题直接针对我的这部分代码。我目前正在学习HTML5画布是如何工作的，并且正在为一个大学项目设计我自己的RPG风格的游戏。环顾四周后，我在这个家伙的博客上找到了一些很好的教程，我按照他的代码进行了三次检查，但现在图像显示出来了

当图像被调用到画布的drawMap（）下时，我尝试在前后放置一个alert（）。它在图像绘制之前有效，但在绘制之后无效，这让我相信这与我的图像渲染有关。有人能再检查一下我的代码，看看是怎么回事吗？这快把我逼疯了

<canvas id="game-viewport" width="760" height="440"></canvas>

<script>

    window.onload = init;

    var map = Array([0,0],[0,0],[0,0],[0,0]);
    var tileSize = 40;

    tileTypes = Array("grass.png");
    tileImage = new Array();

    var loaded = 0;
    var loadTimer;

    function loadImage(){
        for(i = 0; i < tileTypes.length; i++){
            tileImage[i] = new Image();
            tileImage[i].src = "./game/lib/icons/own_icons/" + tileTypes[i];
            tileImage[i].onload = function(){
                loaded++;
            }
        }
    }

    function loadAll(){
        if(loaded == tileTypes.length){
            clearInterval(loadTimer);
            drawMap();
        }
    }

    function drawMap(){
        var mapX = 80;
        var mapY = 10;

        for(i = 0; i < map.length; i++){
            for(j = 0; j < map[i].length; j++){
                var drawTile = map[i][j];
                var xPos = (i - j) * tileSize;
                var yPos = (i + j) * tileSize;
                ctx.drawImage(tileImage[drawTile], xPos, yPos);
            }
        }
    }

    function init(){
        var canvas = document.getElementById('game-viewport')
        var ctx = canvas.getContext('2d');
        loadImage();
        loadTimer = setInterval(loadAll, 100);
    }

</script>

window.onload=init；
var-map=数组（[0,0]，[0,0]，[0,0]，[0,0]）；
var tileSize=40；
tileTypes=数组（“grass.png”）；
tileImage=新数组（）；
var=0；
无功负载定时器；
函数loadImage（）{
对于（i=0；i

唯一的问题是，drawMap函数中没有定义

ctx

将

ctx

作为参数传入函数，或将其设为全局变量

我很懒，做了第二个，但你真的应该做第一个。工作代码：

---

你真的应该在100%的开发时间内使用Chrome调试器（或任何你使用的浏览器）。。如果您这样做了，您将看到一个错误，说明drawMap中未定义

ctx

。如果您正在使用Chrome并按F12打开开发人员工具并转到“脚本”选项卡，您将看到以下内容：

---

这让问题变得非常清楚

是否抛出任何异常？（在Chrome中，选择扳手->工具->Javascript控制台。在Firefox中，使用工具->网络控制台）是的，这很有意义！我正在看的教程没有做到这一点，但它不知怎么起作用了？不过谢谢你的提醒。