HTML 5 Canvas 图像渲染

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/

---

你真的应该有 Chrome 调试器（或者其他）您使用的浏览器）在您开发的 100% 时间里都是如此。如果您这样做，您会看到一条错误，指出 ctx 未在 drawMap 中定义。如果您使用 Chrome 并按 F12 打开开发人员工具并转到脚本选项卡，您会看到以下内容：

这使得问题变得很清楚！