javascript - 让 2 张图像彼此相邻？

Question

我正在尝试将这两张图片放在一起，它们应该连接在一起以制作 map ，这是一张它们应该如何组合在一起的图片。

var testHeightMap =
  'x\n' +
  'x';

var myCanvas = document.getElementById('game_canvas');
var ctx = myCanvas.getContext('2d');
var image = new Image;
var tilesCycled = 0;

image.onload = function() {
  var lines = testHeightMap.split('\n');
  var rowIndex = 0;

  for (var i = 0; i < lines.length; i++) {
    tilesCycled = 0;

    for (var j = 0; j < lines[i].length; j++) {
      tilesCycled = tilesCycled + 1;

      var width = (myCanvas.width / 2 - image.width / 2) + tilesCycled * 30.8;
      var height = (myCanvas.height / 2 - image.height / 2) + tilesCycled * 15.9;


      ctx.drawImage(image,
        width + rowIndex * 34,
        height - rowIndex * 25,
      );
    }

    rowIndex = rowIndex + 1;
  }
}

image.src = 'https://raw.githubusercontent.com/Joopie1994/html5project-client/master/resources/assets/images/floor_tile.png';

body {
  background-color: black;
}

<canvas id="game_canvas"></canvas>

Answer 1

只需更改 for 循环结构和一些数字 - 代码将按要求运行。

var testHeightMap =
  'xxx\n' +
  'xxx\n' +
  'xxx';

var myCanvas = document.getElementById('game_canvas');
var ctx = myCanvas.getContext('2d');
ctx.canvas.width = 512
ctx.canvas.height = 512
var image = new Image;
var tilesCycled = 0;

image.onload = function() {
  var lines = testHeightMap.split('\n');
  for (var i = lines.length; i>0; i--) {
    for (var j = 0; j<lines[i-1].length; j++) {
      var width = (myCanvas.width / 2 - image.width / 2)
      var height = (myCanvas.height / 2 - image.height / 2)
      ctx.drawImage(image,
        width + (j+i) * 32,
        height + (j-i) * 16,
      );
    }
  }
}

image.src = 'https://raw.githubusercontent.com/Joopie1994/html5project-client/master/resources/assets/images/floor_tile.png';

body {
  background-color: black;
}

<canvas id="game_canvas" style="width:512px;height:512px;"></canvas>