绘制到画布时控制台错误

Question

我有一个主要的JavaScript文件试图为游戏绘制一个地图到画布，我有一个包含的文件实际上绘制地图等，但即时通讯在萤火虫中得到这个错误：

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

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

这就要求我level.js文件的主要JS是这样的：

$(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阵列和使用它的代码。让我们撕裂了画布代码并检查数组访问一些console.log()电话：

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()打印件来发现它。如果没有，请将该代码粘贴到Chrome开发者控制台并查看其功能。 （顺便说一句，当最后一个参数具有map[x] && map[x][y]，这是基本相同map[x][y]，但它保护的代码崩溃时map[x]是undefined你会看到发生在日志中。）

既然我们现在map[x][y]是undefined一些的时间，回到drawImage()调用，以此为形象的说法：

mapTiles[ map[x][y] ] 

当map[x][y]为undefined，究竟会是表达评估为？