HTML 5 Рендеринг изображения холста

Question

Первый раз плакат здесь, но определенно не первый раз читатель.

Мой вопрос направлен непосредственно на эту часть кода, который у меня есть. В настоящее время я изучаю, как работают холсты HTML 5, и я разрабатываю свою собственную игру в стиле RPG для университетского проекта. Осмотревшись, я нашел хорошие учебники в блоге этих парней, я следил за его кодом, и тройка проверила его, но теперь изображения появляются.

Я попытался поставить предупреждение() до и после, когда изображение вызывается на холст в drawMap(). Он работает до того, как изображение будет нарисовано, но не после, что приведет меня к мысли, что это как-то связано с моим рендерингом изображения. Может ли кто-то проверить мой код и посмотреть, что происходит? Это сводит меня с ума!

<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/

---

Вы действительно должны иметь отладчик Chrome (или любой другой браузер, который вы используете) на 100% времени вы разрабатываете .. Если вы сделали, вы видите ошибка в том, что ctx не определен в drawMap. Если вы используете Chrome и нажмите клавишу F12, чтобы открыть инструменты разработчика и перейдите на вкладку сценарии, вы увидите следующее:

Что делает проблему довольно ясно!