HTML 5帆布图像渲染

这里的第一次海报，但绝对不是第一次读者。HTML 5帆布图像渲染

我的问题直接针对这部分代码。目前我正在学习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>

来源

2012-02-12 Brad Bird

是否引发任何异常？（在Chrome中，选择扳手 - >工具 - > Javascript控制台。在Firefox中，使用工具 - > Web控制台） – 2012-02-13 00:00:27

唯一的问题是ctx未在drawMap函数中定义。

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

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

http://jsfiddle.net/YUddC/

你真的应该有镀铬调试器（或其他浏览器使用）对你正在开发。如果你没有100％的时候，你会看到一个错误说ctx未在drawMap中定义。如果你正在使用Chrome，并且按F12打开开发人员工具并转到脚本选项卡，你会看到这一点：

enter image description here

这使得问题非常清楚！

来源

2012-02-13 01:33:54

是的，这是有道理的！我正在看的教程没有这样做，它以某种方式工作？然而，谢谢你的领导。 – 2012-02-13 10:08:19

HTML 5帆布图像渲染

回答

相关问题