HTML 5 画布网格系统框颜色错位答案

【问题标题】：HTML 5 canvas grid system box color misplacementHTML 5 画布网格系统框颜色错位
【发布时间】：2021-11-13 20:18:46
【问题描述】：

我正在尝试绘制一个简单的网格并为我单击的每个框着色。当我在 (0,0) 附近的左侧着色时，一切似乎都很好。我离 (0,0) 越远，错位就越大。我不确定问题出在drawOnGrid 方法还是其他地方，请帮忙。

Here is a video demo of the problem

grid-system.js

export default class GridSystem {
  constructor() {
    this.gameContext = this.#getContext(1920, 1080, '#444');
    this.cellSize = 32;
    this.padding = 2;
    this.gridSize = {
      x: 55,
      y: 25,
    }
  }

  getGameContext() {
    return this.gameContext;
  }

  #getContext(width, height, color = "#111", isTransparent = false) {
    this.canvas = document.createElement('canvas');
    this.context = this.canvas.getContext('2d');
    this.canvas.width = width;
    this.canvas.height = height;
    this.canvas.style.position = 'absolute';
    this.canvas.style.background = color;

    if (isTransparent) {
      this.canvas.style.background = 'transparent';
    }

    document.body.appendChild(this.canvas);

    this.context.moveTo(0, 0);

    return this.context;
  }

  drawOnGrid(x, y) {
    let posX = Math.floor(x / this.cellSize) * (this.cellSize + this.padding);
    let posY = Math.floor(y / this.cellSize) * (this.cellSize + this.padding);

    console.log(Math.floor(x / this.cellSize), Math.floor(y / this.cellSize), posX, posY)
    this.gameContext.fillStyle = '#c3c3c3';
    this.gameContext.fillRect(posX, posY, this.cellSize, this.cellSize);
  }

  render() {
    for (let row = 0; row < this.gridSize.x; row++) {
      for (let col = 0; col < this.gridSize.y; col++) {
        this.gameContext.fillStyle = '#0f2d7a';
        this.gameContext.fillRect(
          row * (this.cellSize + this.padding),
          col * (this.cellSize + this.padding),
          this.cellSize,
          this.cellSize
        );
      }
    }

    this.gameContext.font = "20px Courier";
    this.gameContext.fillStyle = "white";
    this.gameContext.fillText('Grid system working', 20, 30);
  }
}

game-engine.js

import GridSystem from './grid-system.js';

export default class GameEngine {
  constructor() {
    this.gridSystem = new GridSystem();
    this.gridSystem.getGameContext();
    this.gridSystem.render();
    this.gameContext = this.gridSystem.getGameContext();
    this.gameContext.canvas.onclick = (e) => {
      let {
        x,
        y
      } = this.gameContext.canvas.getBoundingClientRect();
      let mouseY = e.clientY - x;
      let mouseX = e.clientX - y;
      this.gridSystem.drawOnGrid(mouseX, mouseY);
    }
  }
}

【问题讨论】：

标签： javascript html canvas grid

【解决方案1】：

问题解决了。问题出在这两行

let posX = Math.floor(x / this.cellSize) * (this.cellSize + this.padding);
let posY = Math.floor(y / this.cellSize) * (this.cellSize + this.padding);

当我在单元格的计算中添加填充时，一切正常。

let posX = Math.floor(x / (this.cellSize + this.padding)) * (this.cellSize + this.padding);
let posY = Math.floor(y / (this.cellSize + this.padding)) * (this.cellSize + this.padding);

【讨论】：