我试着做一个网格，如果鼠标指向网格中的一个正方形，它会变成红色，但是，它似乎不工作的地方，正方形占用多个单元格，我似乎找不到原因。

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

let x = canvas.width;
let y = canvas.height;

var xtiles = canvas.width / 32;
var ytiles = canvas.height / 32;

var posX;
var posY;

console.log(x)

function drawTiles() {

  tileStartx = 0;
  tileStarty = 0;
  tileEndx = 32;
  tileEndy = 32;

  for (let i = 0; i < (ytiles + 1); i++) {
    for (let t = 0; t < (xtiles + 1); t++) {
      ctx.beginPath();
      ctx.rect(tileStartx, tileStarty, tileEndx, tileEndy);
      ctx.fillStyle = "grey";
      ctx.fill();
      ctx.stroke();
      ctx.closePath();

      tileStartx += 32;
      tileEndx += 32;
    }

    tileStartx = 0;
    tileEndx = 32
    tileStarty += 32
    tileEndy += 32
  }

  tileStartx = Math.floor(posX / 32) * 32
  tileEndx = tileStartx + 32
  tileStarty = Math.floor(posY / 32) * 32
  tileEndy = tileStarty + 32

  console.log("x start: ", tileStartx, "x end: ", tileEndx);

  ctx.beginPath();
  ctx.rect(tileStartx, tileStarty, tileEndx, tileEndy);
  ctx.fillStyle = "red";
  ctx.fill();
  ctx.stroke();
  ctx.closePath();
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  document.addEventListener('mousemove', (event) => {
    posX = event.clientX;
    posY = event.clientY;
  });

  // console.log(posX , posY);

  drawTiles();

}

setInterval(draw, 100);

<canvas id="myCanvas" width="480" height="320"></canvas>

我试着创建一个网格，当鼠标悬停在网格的一部分上时，它会在该框架中用红色突出显示该部分。为了实现这一点，我跟踪光标的位置，然后通过将数字除以32来计算它将位于哪个正方形中，并在再次乘以32以使其完全适合该正方形后将其向下舍入。然而，当粘贴红色方块时，它会变得更大，并且当它远离原点时，它会覆盖不止1个瓦片。
原点：

远离原点：