如何填写一个单元格点击在画布上的网格在html5

how to fill a cell on clicking the grid on canvas in html5

本文关键字：html5 网格 何填写 单元格 一个      更新时间：2023-09-26

我想在单击特定单元格时填充网格单元格。下面是我的代码:

 function drawBox()
    {   
        for (var row = 0; row < 14; row ++)
        {
            for (var column = 0; column < 13; column ++)
            {
                var x = column * 40;
                var y = row * 40;
                context.beginPath();
                context.rect(x, y, 40, 40);
                context.fillStyle = "white";
                context.fill();
                context.lineWidth = 3;
                context.strokeStyle = 'black';
                context.stroke();
            }
        }
    }

我这里有一个工作示例。代码:

var canvas = document.getElementById("canvas"),
    c = canvas.getContext("2d"),
    boxSize = 40,
    boxes = Math.floor(600 / boxSize);
canvas.addEventListener('click', handleClick);
canvas.addEventListener('mousemove', handleClick);
function drawBox() {
  c.beginPath();
  c.fillStyle = "white";
  c.lineWidth = 3;
  c.strokeStyle = 'black';
  for (var row = 0; row < boxes; row++) {
    for (var column = 0; column < boxes; column++) {
      var x = column * boxSize;
      var y = row * boxSize;
      c.rect(x, y, boxSize, boxSize);
      c.fill();
      c.stroke();
    }
  }
  c.closePath();
}
function handleClick(e) {
  c.fillStyle = "black";
  c.fillRect(Math.floor(e.offsetX / boxSize) * boxSize,
    Math.floor(e.offsetY / boxSize) * boxSize,
    boxSize, boxSize);
}
drawBox();
<canvas id="canvas" width="600px" height="600px"></canvas>

我编辑了drawBox()函数一点，以提高效率。

e.offsetX是鼠标坐标，除以40，然后除以Math.floor()这个得到单元格的编号，然后乘以40得到单元格的起始坐标。

相关文章：