HTML 5 画布图像渲染

Question

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

我的问题直接针对我拥有的这部分代码。我目前正在学习 HTML 5 画布是如何工作的，并且正在为一个大学项目设计我自己的 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>

Answer 1

唯一的问题是你的drawMap函数中没有定义ctx。

要么将ctx 作为参数传递给函数，要么将其设为全局变量。

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

http://jsfiddle.net/YUddC/

---

您确实应该在 100% 的开发时间都使用 Chrome 调试器（或您使用的任何浏览器）。如果您这样做了，您会看到一条错误消息，指出在 drawMap 中未定义 ctx。如果您使用的是 Chrome 并按 F12 打开开发者工具并转到脚本选项卡，您会看到：

这让问题很清楚！