让2张图像彼此相邻？

I'm trying to put these 2 images together, their supposed to join together to make a map, here is an image of how their supposed to go together.

我试图将这两个图像放在一起，他们应该联合起来制作一张地图，这里是他们应该如何一起去的图像。

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>

1 个解决方案

#1

Just change the for loop structure and some numbers - the code will work as required.

只需更改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>