HTML 5 캔버스 이미지 렌더링

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을 인수로 함수에 전달하거나 전역 변수로 만듭니다.

나는 게으르다가 두 번째를했지만, 정말로 첫 번째로해야한다. 근무 코드 :

http://jsfiddle.net/YUddC/

---

당신은 정말 크롬 디버거 (또는 무엇이든 브라우저 사용) 당신이 .. 당신이 한 경우 개발하는 시간의 100 %에 있어야한다, 당신은 볼 것 drawMap에 ctx이 정의되어 있지 않다는 오류가 발생했습니다. 당신이 개발자 도구를 열고 스크립트 탭으로 이동 크롬 누릅니다 F12를 사용하는 경우, 당신은이를 볼 것 :

문제가 꽤 명확하게!