我不能在drawImage（）的對象中使用對象嗎？

Question

我似乎無法弄清楚爲什麼我的代碼不起作用。我基本上試圖做的是使用數組生成基於10x10瓦片的地圖。

這個想法是創建一個名爲Box的對象，該對象具有'x'和'y'屬性以及框內的圖像對象。然後，2d數組中的每個位置都填充一個盒子對象。我想然後畫出所有這些數組。每個tile（或數組元素）是一個64x64的盒子。

const ROW = 10; 
const COLS = 11; 
const SIZE = 64; 

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

//creating tile 
function box() { 
    this.xaxis = 56; 
    this.yaxis = 0; 
    this.img = new Image(); 
    this.img.src = "box_image.png"; 
} 

//creating map 
var map =[]; 

function setMap() { 
    for (var i = 0; i < ROW; i++) { 
     for (var o = 0; o < COLS; o++) { 
      map[i][o] = new box(); 
     } 
    } 
} 

//rendering map 
function render() { 
    for (var i = 0; i < map.length; i++) { 
     for (var x = 0; x < map.length; x++) { 
      var tile = map[i][x]; 
      tile.xaxis *= i; 
      tile.yaxis *= x; 

      surface.drawImage(tile.img, tile.xaxis, tile.yaxis, 64, 64); 

     } 
    } 
} 


setTimeout(render, 10); 

Answer 1

添加一些你忘記的元素，下面是我該怎麼做。

Fiddle

HTML

<canvas id="canvas" width="1000" height="1000"></canvas> 
    <!-- set canvas size --> 

JS

const ROW = 10; 
    const COLS = 11; 
    const SIZE = 64; 

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

    //creating tile 
    function box() { 
     this.xaxis = 56; 
     this.yaxis = 0; 
     this.src = "https://cdn4.iconfinder.com/data/icons/video-game-adicts/1024/videogame_icons-01-128.png"; //save path to image 
    } 

    //creating map 
    var map =[]; 

    function setMap() { 
     for (var i = 0; i < ROW; i++) { 
      var arr = []; //make new row 
      map.push(arr); //push new row 
      for (var o = 0; o < COLS; o++) { 
       map[i].push(new box()); //make and push new column element in current row 

      } 
     } 
    } 

    //rendering map 
    function render() { 
     for (var i = 0; i < ROW; i++) {   //For each row 

      for (var x = 0; x < COLS; x++) {  //And each column in it 
       var tile = map[i][x]; 
        tile.xaxis *= i; 
        tile.yaxis += (x*SIZE); //increment y value 

       var img = new Image(); 
       img.onload = (function(x,y) { //draw when image is loaded 
        return function() { 
         surface.drawImage(this, x, y, 64, 64); 
         } 

       })(tile.xaxis, tile.yaxis); 

       img.src = tile.src; 
      } 
     } 
    } 

    setMap(); //create the grid 
    render(); //render the grid 

Answer 2

有一些代碼中的錯誤的。

首先你正在載入相同的圖片110次。加載一次，這將節省大量的內存和時間。

您創建一個單一的dimetioned陣圖

map = []; 

然後嘗試訪問的兩個模糊的地圖。 map[i][o]，這將無法正常工作。你需要爲每一行創建一個新的數組。

您創建函數來填充地圖setMap()但您從不調用該函數。

您創建的方塊將yaxis值設置爲0.當您調用渲染並將其乘以列索引時，結果將爲零，因此您只會看到一列圖像。你需要將yaxis的值設置爲某個值（64）

下面是你的代碼修正了一些意見。我離開了零值yaxis值，也許這就是你想要的。該圖像只創建一次，而onload事件用於調用render當調用setMap時，我爲每行添加一個新數組。我打電話setMap在底部，但你聲明和定義var map = [];

const ROW = 10; 
const COLS = 11; 
const SIZE = 64; 

const canvas = document.getElementById("canvas"); 
const surface = canvas.getContext("2d"); 
const image = new Image(); 
image.src = "box_image.png"; 
// onload will not fire until all the immediate code has finished running 
image.onload = function(){render()}; // call render when the image has loaded 

//creating tile 
function Box() { // any function you call with new should start with a capital 
    this.xaxis = 56; 
    this.yaxis = 0; // should this not be something other than zero 
    this.img = image; 
} 

//creating map 
const map =[]; 
function setMap() { 
    for (var i = 0; i < ROW; i++) { 
     var row = []; // new array for this row 
     map[i] = row; 
     for (var o = 0; o < COLS; o++) {    
      row[o] = new box(); 
     } 
    } 
} 

//rendering map 
function render() { 
    for (var i = 0; i < map.length; i++) { 
     for (var x = 0; x < map[i].length; x++) { // you had map.length you needed the array for row i which is map[i] 
      var tile = map[i][x]; 
      tile.xaxis *= i; 
      tile.yaxis *= x; // Note you have zero for yaxis?? 0 times anything is zero 

      surface.drawImage(tile.img, tile.xaxis, tile.yaxis, 64, 64); 

     } 
    } 
} 

setMap(); // create the map