Can I not use an object in an object for drawImage()?

问题:

I can't seem to figure out why my code doesn't work. What I'm essentially trying to do is generate a 10x10 tile based map using arrays.

The idea is to create an object called Box with an 'x' and 'y' axis property and also an image object within the box. Then, each position in the 2d array is populated with a box object.

I then want to draw all these arrays out on a canvas. Each tile(or array element) is a 64x64 box.

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); 

回答1:

Adding a few elements you forgot, here's how I would do it.

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 

回答2:

There are a number of errors in your code.

First you are loading the same image 110 times. Load it once and that will save a lot of memory and time.

You create a single dimetioned array map

map = []; 

Then attempt to access to as a two dim map. map[i][o] that will not work. You need to create a new array for each row.

You create the function to populate the map setMap() but you never call the function.

The Boxes you create have the yaxis value set to 0. When you call render and multiply it by the column index the result will be zero, so you will only see one column of images. You need to set the yaxis value to some value (64)

Below is your code fixed up with some comments. I left the zero yaxis value as maybe that is what you wanted. The image is created only once and the onload event is used to call render When setMap is called I add a new array for each row. I call setMap at the bottom but can be called anytime after you declare and define 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 

文章来源: Can I not use an object in an object for drawImage()?