Javascript 如何添加'；隐藏的'；有背景图片的画布上的网格？

我正在制作一个基于html/js的回合游戏，我使用javascript创建了canvas元素。 我放了一个重复的背景图片，看起来像一个10 X 10平方的棋盘，但我想在上面放一个网格，这样我最终可以让每个“方块”都可以点击，让角色移动，让方块在悬停时亮起，等等

我怎样才能以最简单的方式做到这一点

多谢各位

下面是我用来在javascript中创建画布的代码：

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 480;
        this.canvas.style.cursor = "default"; 
        this.context = this.canvas.getContext("2d");
        document.body.append(this.canvas, document.body.childNodes[0]);
        this.frameNo = 0;
        this.interval = setInterval(updateGameArea, 20);
        window.addEventListener('onclick()', function (e) {
          myGameArea.x = e.pageX;
          myGameArea.y = e.pageY;
        })

---

好吧，你可以用网格创建一个图像并覆盖它。否则，您可以使用

lineTo

在网格上创建线。然后重复这样做以创建网格

let canvas = <link to canvas>;
let context = canvas.getContext('2d');
let gridSize = 10;
let canvasSize = {
    width:400;
    height:400;
}
for(let i=0;i<canvasSize.height;i+=gridSize){
    context.beginPath();
    context.moveTo(i,0);
    context.lineTo(i,canvasSize.height);
    context.strokeStyle = "#222222";
    context.stroke();
}

for(let i=0;i<canvasSize.width;i+=gridSize){
    context.beginPath();
    context.moveTo(0,i);
    context.lineTo(canvasSize.width,i);
    context.strokeStyle = "#222222";
    context.stroke();
}

let canvas=；
让context=canvas.getContext（'2d'）；
让gridSize=10；
让画布大小={
宽度：400；
身高：400；
}
对于（设i=0；i实现网格覆盖的一种方法，允许您的游戏确定单击了哪个网格单元，将是为网格的每个单元生成单独的DOM元素，其中每个单元与网格本身对齐/调整大小

您可以使用CSS为每个网格单元定义通用样式规则，也可以使用
：hover
选择器定义“hover”样式，以显示用户悬停的单元：

/* Styling for each tile in grid with absolute 
position against relative wrapper */
.gameAreaWrapper a {
  display:block;
  position: absolute;
  width: 10%;
  height: 10%;
}

/* Cause visual feedback to user when
tile is hovered */
.gameAreaWrapper a:hover {
  background:rgba(255,255,0,0.5);
}

然后，脚本中的函数将使用嵌套循环为10x10网格生成单元格，如下所示：

function generateGameBoardSquares(wrapper) {

  for(let x = 0; x < 10; x++) {
    for(let y = 0; y < 10; y++) {

      /* Create the cell element */
      const cell = document.createElement("a");

      /* Position relative to top-left corner of parent */
      cell.style.left = `${x*10}%`
      cell.style.top = `${y*10}%`      

      /* Add cell to wrapper parent */
      wrapper.append(cell);
    }  
  }
}


查看如何使用
addEventListener
。此外，您可能根本不想使用canvas…canvas使用过度，除了
背景图像
是一种样式外，您不能在其上附加事件侦听器。您需要html元素，并使用css flex或css grid将它们按网格状排列。@a
是一个HTML元素，它可以很好地支持事件监听器。只是需要更多的工作来确定单击/悬停的位置happening@blex，“重复背景图片，使其看起来像一块10 X 10的正方形板”听起来他想在将背景图像的CSS
background repeat
属性作为网格元素时使用网格效果。谢谢你的建议。我当时使用的画布似乎是最简单的，但如果有更好/更简单的方法，我一定会探索它。谢谢！！我会尝试一下。谢谢你的链接也