使用画布上下文：给一个瓷砖着色，而其他瓷砖保持未着色

Question

我有一组3x6的图块。

所需的行为：我只希望单击的图块为红色。

问题：无论单击如何，所有磁贴都被涂成红色。

这是用于在瓷砖网格上设置点击位置的代码：

 const currentPosition = { x: 0, y: 0 };

  toolboxCanvas.addEventListener('click', ({ clientX, clientY }) => {
    currentPosition.x = Math.floor(
      (clientX - toolboxCanvas.offsetLeft) / (tileWidth * zoom)
    );
    currentPosition.y = Math.floor(
      (clientY - toolboxCanvas.offsetTop) / (tileWidth * zoom)
    );
  });

有问题的代码：

for (let x = 0; x < 3; x++) {
      for (let y = 0; y < 3 * 2; y++) {
        toolboxDrawingContext.rect(
          x * tileWidth * zoom,
          y * tileWidth * zoom,
          tileWidth * zoom,
          tileWidth * zoom
        );
        if (x === currentPosition.x && y === currentPosition.y) {
          toolboxDrawingContext.fillStyle = 'red';
          toolboxDrawingContext.fill();
        }
        toolboxDrawingContext.strokeStyle = '#f7f7f7';
        toolboxDrawingContext.stroke();
      }
    }

任何想法？

Answer 1

单击后可能会忘记清除矩形吗？

toolboxCanvas.addEventListener('click', ({ clientX, clientY }) => {
    ...
    toolboxDrawingContext.clearRect(0, 0, toolboxDrawingContext.canvas.width, toolboxDrawingContext.canvas.height);
});