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帆布圖像渲染

回答

相關問題