Question

我正在尝试使用JavaScript创建一个基本的等距引擎，但是使用以下代码，该图像无法渲染，我只是得到了一块空白的白色画布。这是为什么？是否因为图像源是URL？我一直在想一个小时了。哈哈。

(function(isometric) {
  var map = [
    [1, 1, 1, 1],
    [1, 1, 1, 1],
    [1, 1, 1, 1],
    [1, 1, 1, 1]
  ];

  var tileGraphics = [];

  function loadImg() {
    var tgToLoad = ['http://jsiso.com/tutorials/images/land.png'];
    var tgLoaded = 0;

    for (var i = 0; i < tgToLoad.length; i++) {
      tileGraphics[i] = new Image(25, 52);
      tileGraphics[i].src = tgToLoad[i];

      tileGraphics[i].onload = function() {
        tgLoaded++;
        
        if (tgLoaded === tgToLoad.length) {
          drawMap();
        }
      }
    }
  }

  function drawMap() {
    var ctx = document.getElementById('main').getContext('2d');

    var tileW = 25;
    var tileH = 52;

    var mapX = 76;
    var mapY = 52;

    var drawTile;

    for (var i = 0; i < map.length; i++) {
      for (var j = 0; j < map[i].length; i++) {
        drawTile = map[i][j];
        ctx.drawImage(tileGraphics[drawTile], (i - j) * tileH + mapX, (i + j) * tileH / 2 + mapY);
      }
    }
  }

  function init() {
    isometric.removeEventListener('load', init);
    loadImg();
  }

  isometric.addEventListener('load', init, false);
})(this);

<canvas id="main" width="256" height="256"></canvas>

我正在关注this tutorial。

Answer 1

正如其他人所指出的那样，存在一些问题。

您的数组中有一个图像（索引0），并且您正在尝试加载图像（索引1）。您需要从索引中减去1才能访问正确的图像。
您的j内循环正在递增i++

这里是其他人的link to the tutorial。

var TILE_WIDTH = 25, TILE_HEIGHT = 52;
var map = [
  [1, 1, 1, 1],
  [1, 2, 2, 1],
  [1, 2, 2, 1],
  [1, 1, 1, 0] // Skip drawing the southern quadant.
];
var tileGraphics = loadImages([
  'http://jsiso.com/tutorials/images/land.png',
  'http://jsiso.com/tutorials/images/water.png'
], function() {
  drawMap(document.getElementById('main').getContext('2d'), drawTile);
});

function loadImages(arr, callback) {
  var result = [];
  var loadCount = 0;
  for (var i = 0; i < arr.length; i++) {
    loadImage(arr[i], TILE_WIDTH, TILE_HEIGHT, function() {
      result.push(this); // Add image
      loadCount++;
      if (loadCount === arr.length) {
        callback();
      }
    });
  }
  return result;
}

function loadImage(src, width, height, callback) {
  var img = new Image(width, height);
  img.src = src;
  img.onload = callback;
  return img;
}

function drawMap(ctx, tileDrawingFn) {
  var width = ctx.canvas.width;
  var height = ctx.canvas.height;
  var xOffset = ((width - TILE_WIDTH) / 2) - (TILE_WIDTH / 2);
  var yOffset = ((height - TILE_HEIGHT) / 2) - (TILE_HEIGHT / 2);
  for (var row = 0; row < map.length; row++) {
    for (var col = 0; col < map[row].length; col++) {  // not row++
      tileDrawingFn(ctx, row, col, xOffset, yOffset, TILE_WIDTH, TILE_HEIGHT);
    }
  }
}

function drawTile(ctx, row, col, x, y, width, height) {
  var index = map[row][col] - 1; // Skip tile 0 aka index -1
  if (index > -1) {
    var image = tileGraphics[index]; // Subtract 1 to get image 0
    ctx.drawImage(image, (row - col) * width + x, (row + col) * height / 4 + y); // vs. height/2
  }
}

#main { border: thin solid black; background: #444; }

<canvas id="main" width="256" height="192"></canvas>

画布不渲染图像

1 个答案: