HTML 5 Canvas Imageレンダリング

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

唯一の問題は、ctxがあなたのdrawMap機能で定義されていないということです。

引数として関数にctxを渡すか、グローバル変数にします。

私は怠け者であり、2番目のことをしましたが、本当に最初に行うべきです。ワーキングコード：

http://jsfiddle.net/YUddC/

---

あなたは本当にあなたがやった場合は、ANを参照してくださいね..あなたが開発している100％の時間でChromeのデバッガ（または任意のブラウザ使用）を持つべきですdrawMapにctxが定義されていないというエラーです。あなたが開発者ツールを開き、スクリプト]タブに移動するにはChromeとプレスF12を使用している場合、あなたはこれを参照してくださいね。

問題がかなり明確になります！