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调试器（或者你使用的任何浏览器）。如果你这样做了，你会看到一个错误，说ctx没有在drawMap。如果您使用Chrome并按F12打开开发人员工具并转到脚本标签，您会看到：

enter image description here

这使得问题非常清楚！

HTML 5 Canvas图像渲染

1 个答案: