캔버스에 그릴 때 콘솔 오류가 발생했습니다

Question

게임용 캔버스에 타일 맵을 그려 넣으려고하는 주 javascript 파일이 있는데 실제로지도 등을 그려 넣는 파일이 포함되어 있지만 Firebug에서이 오류가 발생합니다.

ctx.drawImage(mapTiles[map[x][y]],x*tilesize, y*tilesize); 

내 level.js 파일을 호출 주요 JS

TypeError: Value could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement. [Break On This Error]

은 다음과 같습니다

$(document).ready(function(){ 

var canvas = document.getElementById("TBG"); 
var context = canvas.getContext("2d"); 

var ui = new Gui(); 
var level = new Level(); 

//----------Login/Register Gui -------------- 
$('#TBG').hide(); 
$('#load-new').hide(); 
$('#reg').hide(); 
$('#login').hide(); 

//if login_but is clicked do ui.login function 
$('#login_but').click(ui.login); 
//if reg_but is clicked do ui.register function 
$('#reg_but').click(ui.register); 

$('#new_but').click(function(){ 
    game_settings("new"); 
}); 

$('#load_but').click(function(){ 
    game_settings("load"); 
}); 

//if login_sumbit button is clicked do ui.login_ajax function 
$("#login_submit").click(ui.login_ajax); 

$("#reg_submit").click(ui.register_ajax); 

$("#welcome").on("click", "#logout_but", ui.logout); 

//____________________________________________ 
//Initialisation of game 

function game_settings(state){ 
    if(state == "load"){ 
     ui.load_game(); 
     //do ajax call to load user last save 
     //level.level_init(0,1); 

     draw(); 
    } 
    else{ 
     //set beginning params 


     //Change screens 
     ui.new_game(); 
     alert("new game"); 
    } 
} 

function draw() { 

    context.clearRect(0,0,canvas.width,canvas.height); 

    level.draw(context); 

    setTimeout(draw, 30); 


} 
// End Loop 
     }); 

및 코드 (level.js)이 라인은 다음과 같습니다 파일 :

function Level(){ 

var tilesize = 32; 
var map = 0; 
var mapTiles = []; 

    // var saved_level = level; 
    //var saved_location = location; 


map = [ 
    [1,1,1,1,1,1,1,1,1,1], 
    [2,2,2,2,2,2,2,2,2,2] 
]; 

    for (x = 1; x <= 256; x++) { 
     var imageObj = new Image(); // new instance for each image 
     imageObj.src = "images/prototype/"+x+".jpg"; 
     mapTiles.push(imageObj); 
    } 


this.draw = function(ctx) { 
for (var x = 0; x <= 31; x++){ 
     for (var y = 0; y <= 31; y++){ 
      ctx.drawImage(mapTiles[map[x][y]],x*tilesize, y*tilesize); 

    } 
} 
}; 

} 

혹시이 오류가 발생 했습니까?

와 나는 문제, 감사 톰를 수정 얼마나

Answer 1

는 캔버스와 다른 모든 것을 잊어와 map 배열을 사용하는 코드를 보면.

map = [ 
    [1,1,1,1,1,1,1,1,1,1], 
    [2,2,2,2,2,2,2,2,2,2] 
]; 

console.log(map.length); 
console.log(map[0].length); 

for (var x = 0; x <= 31; x++){ 
    for (var y = 0; y <= 31; y++){ 
     console.log(x, y, map[x], map[x] && map[x][y]); 
    } 
} 

당신이 문제를 볼 마십시오의 캔버스 코드를 추출하고 배열 일부 console.log() 호출로 액세스 살펴 보자? console.log() 호출 내용이 무엇인지 생각하면 문제를 발견 할 수 있습니다. 그렇지 않은 경우 해당 코드를 Chrome 개발자 콘솔에 붙여넣고 그 기능을 확인합니다. (BTW, 마지막 인수가 map[x] && map[x][y]을 가지고 어디에, 그것은 본질적으로 map[x][y]와 동일합니다하지만 undefined 로그에 일어날 볼 같은 경우 map[x]는 충돌의 코드를 보호합니다.)

을 이제 우리는 지금 map[x][y]이 undefined 일부입니다 시간의 이미지 인수로이 사용하는 drawImage() 통화로 돌아가 : 그 표현은 무엇

mapTiles[ map[x][y] ] 

map[x][y]이 undefined입니다

, 위해 평가합니다?