이미지는 HTML5의 2D 캔버스 저장되지 않습니다

Question

사진 : http://oi43.tinypic.com/qzou2r.jpg

내가 간단한 2D 타일 엔진을 코딩하는 방법을 배우는, 그리고 가장 배우는 방법 중 하나가 같은 프로그램을 만들려고 노력으로하지만,에 다른 방법으로 그리고 그걸로 땜질. Anywo, 나는이 튜토리얼을 따라 갔다 : http://that-guy.net/articles/2/Javascript-tile-engine-map-with-images/ 그리고 내 코드가 작동하지 않는다. 그 파일은 신원이 밝혀지지 않았거나 무언가이며 오류가있는 캔버스를 채 웁니다. 그의 (첫 번째) 튜토리얼의 첫 번째 튜토리얼은 응용 프로그램을 설정하는 방법으로 사용할 수 있지만, 어떤 이유로이 방법은 작동하지 않습니다. 나는 문제가 무엇인지 알지만 문제를 해결하는 방법을 확신 할 수 없다. 너희들이 도울 수 있는지 궁금해하고 있었다. 불쾌한 논평은 제가 생각하기에 문제라고 생각합니다 : * * *

var engine = { 
outhnd: document.getElementById('output'), 
canvas: document.getElementById('canvas'), 
handle: this.canvas.getContext('2d'), 
width: this.canvas.width, 
height: this.canvas.height, 
tilesX: this.canvas.width/16, 
tilesY: this.canvas.height/16, 
images: 0, // *** I think this is what is causing the problem with the TILESTORE. 

output: function (message) { 
    engine.outhnd.innerHTML += '<br />' + message; 
}, 
start: function (mapData, x, y) { 
    engine.handle.translate(0, 8); 
    engine.output('starting...'); 
    engine.viewport.x = x; 
    engine.viewport.y = y; 

    engine.tilestore('g', 'tile_grass.png'); 
    engine.tilestore('r', 'tile_rockgrass.png'); 
    engine.tilestore(' ', 'tile_black.png'); 

    engine.draw(mapData); 
    engine.output('done'); 
}, 
viewport: function() { 
    var x = 0; 
    var y = 0; 
}, 
allLoaded: function() { 
    var i, len = engine.images.length; 
    for(i=0; i<len; i++) { 
     if(engine.images[i][2] === false) { 
      return false; 
     } 
    } 
    return true; 
}, 
draw: function (mapData) { 
    if(engine.allLoaded() === false){ 
     setTimeout(function(md) 
    { 
    return function() { 
     engine.output('[engine.draw] waiting for images...'); 
     engine.draw(md); 
    } 
    }(mapData), 100); 
    }else{ 
     engine.drawmap(mapData); 
    } 

}, 
drawmap: function (mapData) { 
    var i, j; 

    var mapX = 0; 
    var mapY = 0; 
    var tile; 

    engine.output('drawing map from ' + engine.viewport.x + ',' + engine.viewport.y + ' to ' + 
    (engine.viewport.x + engine.tilesX) + ',' + (engine.viewport.y + engine.tilesY)); 
    for(j=0; j<engine.tilesY; j++) { 
     for(i=0; i<engine.tilesX; i++) { 
      mapX = i + engine.viewport.x; 
      mapY = j + engine.viewport.y; 

      tile = (mapData[mapY] && mapData[mapY][mapX]) ? mapData[mapY][mapX] : ' '; 
      engine.tiledraw(i, j, tile); 
     } 
    } 
}, 
tiledraw: function (x,y,tile){ 
var img = engine.tileretrieve(tile); 
    engine.handle.fillText(img, x * 16, y * 16); 
}, 
//*** the problem *** 
tilestore: function(id, imgSrc) { 
    var newid = engine.images.length; 
    var tile = [id, new Image(), false]; 

    tile[1].src = imgSrc; 
    tile[1].onload = function() { 
     tile[2] = true; 
     } 
    engine.images[newid] = tile; 
}, 
tileretrieve: function(id) { 
    var i, len = engine.images.length; 
    for(i=0; i<len; i++){ 
     if(engine.images[i][0] == id) { 
      return engine.images[i][1]; 
     } 
    } 
}, 
}; 

이것이 작동하지 않는 이유가 있습니까? 이미지를 저장하지 않는 이유는 무엇입니까? 나는 자바 스크립트를 처음 사용하는데 이것은 많은 두통으로부터 스스로를 구할지도 모른다.

편집 :

var mapone = 
    [ 
    ['r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r'], 
    ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'], 
    ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'], 
    ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'], 
    ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'r', 'g', 'g', 'g', 'r'], 
    ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'r', 'r', 'g', 'g', 'r'], 
    ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r', 'g', 'g', 'r'], 
    ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r', 'g', 'g', 'r'], 
    ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r', 'g', 'g', 'r'], 
    ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'], 
    ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'], 
    ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'], 
    ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'], 
    ['r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r'] 
    ]; 
    engine.start(mapone, 0, 5); 

편집 : 내가 전화를 어떻게하기 전에 잘못된 링크를 준 : http://that-guy.net/articles/2/Javascript-tile-engine-map-with-images/

편집 사람이 관심이 있다면, 나는 내가 쓴 코드를 작업했고, 나는 게시 할 예정입니다 새로운 길을 배우고 자하는 모든 이들을위한 곳입니다. 도움을 주신 모든 분들께 감사드립니다.

var image_holder = function() { 

    this.image_id =  0; // 'a','b', etc 
    this.image_src = 0; // the source 
    this.image_type = 0; // 0 or 1 
    this.image_load = 0; // is it loaded 0 = false 1 = true 
    this._head =  null; 
}; 
image_holder.prototype = { 

add: function (image_id, image_src, image_type, image_load) { 

    var node = { 
     image_id:image_id, 
     image_src:image_src, 
     image_type:image_type, 
     image_load:image_load, 
     next:null 
    }, 
    current; 

     if (this._head === null) { 
      this._head = node; 
     } else { 
      current = this._head; 

      while (current.next) { 
       current = current.next; 
      } 
      current.next = node; 
     } 

     this.image_id = image_id; 
     this.image_src = image_src; 
     this.image_type = image_type; 
     this.image_load = image_load; 

     }, 
get: function (image_id, image_load) { 
    var current = this._head; 

    if(image_id != null && image_load == null) { 
     while (current != null && current.image_id != image_id) { 
       current = current.next; 
      } 
      if(current != null){ 
       return current; 
       } 
      return null; 
     } 

    if(image_id == null && image_load != null) { 
     while (current != null && current.image_load != image_load) { 
       current = current.next; 
      } 
      if(current != null) 
       return current; 
      return null; 
     } 
    }, 
}; 

var engine = { 
    outhnd: document.getElementById('output'), 
    canvas: document.getElementById('canvas'), 
    handle: this.canvas.getContext('2d'), 
    width: this.canvas.width, 
    height: this.canvas.height, 
    tilesX: this.canvas.width/16, 
    tilesY: this.canvas.height/16, 
    obj: new image_holder(), 

output: function (message) { 
    engine.outhnd.innerHTML += '<br />' + message; 
}, 
start: function (mapData, x, y) { 
    engine.handle.translate(0, 8); 
    engine.output('starting...'); 
    engine.viewport.x = x; 
    engine.viewport.y = y; 

    var images0 = "tile_grass.png"; 
    var images1 = "tile_rock.png"; 
    var images2 = "tile_black.png"; 

    imageObject0 = new Image(); 
    imageObject0.src = images0; 
    imageObject0.onload = function() { 
         engine.obj.add('g', imageObject0, 0, 1); 
         var b = engine.obj.get('g').image_id; 
         console.log(b); 
           imageObject1 = new Image(); 
           imageObject1.src = images1; 
           imageObject1.onload = function() { 
           engine.obj.add('r', imageObject1, 0, 1); 
             imageObject2 = new Image(); 
             imageObject2.src = images2; 
             imageObject2.onload = function() { 
             engine.obj.add(' ', imageObject2, 0, 1); 
             engine.draw(mapData); 
             engine.output('done'); 
             };        
           }; 
         }; 
}, 
viewport: function() { 
    var x = 0; 
    var y = 0; 
}, 
draw: function (mapData) { 
    engine.drawmap(mapData); 
}, 
drawmap: function (mapData) { 
    var i, j; 
    var mapX = 0; 
    var mapY = 0; 
    var tile; 

    engine.output('drawing map from ' + engine.viewport.x + ',' + engine.viewport.y + ' to ' + 
    (engine.viewport.x + engine.tilesX) + ',' + (engine.viewport.y + engine.tilesY)); 
    for(j=0; j<engine.tilesY; j++) { 
     for(i=0; i<engine.tilesX; i++) { 
      mapX = i + engine.viewport.x; 
      mapY = j + engine.viewport.y; 

      tile = (mapData[mapY] && mapData[mapY][mapX]) ? mapData[mapY][mapX] : ' '; 
      engine.tiledraw(i, j, tile); 
     } 
    } 
}, 
tiledraw: function (x,y,tile){ 
    var img = engine.obj.get(tile,null).image_src; 
    engine.handle.drawImage(img, x * 16, y * 16); 
}, 
}; 


CALL: 

     var mapone = [ 
     ['r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r'], 
     ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'], 
     ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'], 
     ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'], 
     ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'r', 'g', 'g', 'g', 'r'], 
     ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'r', 'r', 'g', 'g', 'r'], 
     ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r', 'g', 'g', 'r'], 
     ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r', 'g', 'g', 'r'], 
     ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r', 'g', 'g', 'r'], 
     ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'], 
     ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'], 
     ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'], 
     ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'], 
     ['r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r']]; 
     engine.start(mapone, 0, 5); 

Answer 1

난 당신이 images = 0 를 인스턴스화하고 나중에이 이미지 배열의 길이를 얻기 위해 노력하고 있지만 이미지가 현재 int를 들고 var newid = engine.images.length; 시도 때문에 발생이 문제가 있다고 생각합니다. images = []

Answer 2

과 같은 이미지 인스턴스화 예, 'images = 0'이 올바르지 않습니다. 단지 배열이어야합니다.

images = [], 

두 번째 문제는 올바른 캔버스 방법을 호출하지 않는다는 것입니다. tileDraw 메서드를 다음으로 변경하십시오.

tiledraw: function (x,y,tile){ 
var img = engine.tileretrieve(tile); 
    engine.handle.drawImage(img, x * 16, y * 16); 
}, 

여전히 fillText로 설정되어 있습니다. 당신은 당신이 다음 튜토리얼로 이동하면 코드의 일부를 업데이트하는 것을 잊었다처럼

것 같습니다.

이 당신을 돕기 위해, 대부분의 브라우저의 개발자 도구를 엽니 다 F12은 (당신이 파이어 폭스에 불을 지르고 설치해야합니다). 콘솔 탭에는 디버그에 도움이되는 줄 번호가있는 JavaScript 오류가 표시됩니다. 중단 점을 설정하여 코드 문제를 해결할 수도 있습니다.