我不能在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