javascript 使用HTML5画布绘制切片网格

6tdlim6h 于 2023-03-16 发布在 Java

关注(0)|答案(1)|浏览(93)

我做了这个小东西来使用MDN（https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps）中的片段绘制tilemap，但是当我运行它时，画布上只是一片空白。
下面是代码：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var map = {
  cols: 8,
  rows: 8,
  tsize: 64,
  tiles: [
    1, 3, 3, 3, 1, 1, 3, 1,
    1, 1, 1, 1, 1, 1, 1, 1,
    1, 1, 1, 1, 1, 2, 1, 1,
    1, 1, 1, 1, 1, 1, 1, 1,
    1, 1, 1, 2, 1, 1, 1, 1,
    1, 1, 1, 1, 2, 1, 1, 1,
    1, 1, 1, 1, 2, 1, 1, 1,
    1, 1, 1, 1, 2, 1, 1, 1
  ],
  getTile: function(col, row) {
    return this.tiles[row * map.cols + col];
  }
};

console.log("drawing tilemap");

draw_map();

function draw_map() {
  console.log("hey its working!");

  for (let column = 0; column < map.columns; column++) {
    for (let row = 0; row < map.rows; row++) {
      console.log("its tiling time");
      const tile = map.getTile(column, row);
      const x = column * map.tileSize;
      const y = row * map.tileSize;
      drawTile(tile, x, y);
    }
  }
}

function drawTile(tile, X, Y) {
  print("picking color");
  if (tile === 1) {
    ctx.fillStyle = "#00ff44";
  }
  if (tile === 2) {
    ctx.fillStyle = "#fffd94";
  }
  if (tile === 3) {
    ctx.fillStyle = "#78877d";
  }
  ctx.fillRect(X, Y, map.tileSize, map.tileSize);
}

<canvas id="myCanvas" width="512" height="512" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

我试着让它在画布上绘制一个64px的正方形图块，根据数组的值使用不同的颜色。

JavaScript

来源：https://stackoverflow.com/questions/75738941/drawing-a-tile-grid-with-html5-canvas

1条答案

按热度按时间

rkue9o1l1#

你只是有几个错别字。我注解并修正了代码：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var map = {
  cols: 8,
  rows: 8,
  tsize: 64,
  tiles: [
    1, 3, 3, 3, 1, 1, 3, 1,
    1, 1, 1, 1, 1, 1, 1, 1,
    1, 1, 1, 1, 1, 2, 1, 1,
    1, 1, 1, 1, 1, 1, 1, 1,
    1, 1, 1, 2, 1, 1, 1, 1,
    1, 1, 1, 1, 2, 1, 1, 1,
    1, 1, 1, 1, 2, 1, 1, 1,
    1, 1, 1, 1, 2, 1, 1, 1
  ],
  getTile: function(col, row) {
    return this.tiles[row * map.cols + col];
  }
};

console.log("drawing tilemap");

draw_map();

function draw_map() {
  console.log("hey its working!");

  for (let column = 0; column < map.cols; column++) {
                                 // ^^^ it's 'cols', not 'columns'
    for (let row = 0; row < map.rows; row++) {
      console.log("its tiling time");
      const tile = map.getTile(column, row);
      const x = column * map.tsize; // <- 'tsize', not 'tileSize'
      const y = row * map.tsize;    // <-
      drawTile(tile, x, y);
    }
  }
}

function drawTile(tile, X, Y) {
  console.log("picking color"); // 'console.log', not 'print'
  if (tile === 1) {
    ctx.fillStyle = "#00ff44";
  }
  if (tile === 2) {
    ctx.fillStyle = "#fffd94";
  }
  if (tile === 3) {
    ctx.fillStyle = "#78877d";
  }
  ctx.fillRect(X, Y, map.tsize, map.tsize); // again, 'tsize'
}

<canvas id="myCanvas" width="512" height="512" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

赞(0）回复(0）举报 2023-03-16

我来回答

javascript 使用HTML5画布绘制切片网格

1条答案

相关问题

热门标签

最新问答