如何制作具有可点击颜色变化的网格？

Question

有一个rectangular 网格，大小为12 by 12，其中每个角都是可点击的，距离12*12 网格的每个角有6*3 个单元格（单击4 corners 中的任何一个应选择6*3 cells)，这将通过颜色变化来指示。

单击其中一个角后，将检查剩余的单元格，即(144-18 =126) 126 个单元格，是否可以被一个数字整除。

例如，126/6 =21，所以现在每个 21 部分应该用不同的颜色表示。需要检查的数字取决于用户，如果用户给出一个不可整除的数字，它不会显示任何变化。

我尝试应用的逻辑是，我创建了一个大小为12*12 的多维数组，其中包含全零。当用户通过角坐标之一时，6*3 单元格将变为 1。但是我不知道如何在html画布中实现这个逻辑，也不知道如何进一步进行。

addBed = (x, y) => {
  let test = Array(12).fill(0).map(x => Array(12).fill(0));
  let bedX = 3, bedY = 6; // BED AREA = 6*3                               
  let dx = 1, dy = 1; 
  let endX = bedX, endY = bedY;
  const roomX = 11, roomY = 11  
  
  if (x === roomX) {
    dx = -1
    endX = roomX - bedX
  }
  if (y === roomY) {
    dy = -1
    endY = roomY - bedY
  }
  for (let i = x; dx === 1 ? i < endX : i > endX; i += dx) {
    for (let j = y; dy === 1 ? j < endY : j > endY; j += dy) {
      test[i][j] = 1;
    }
  }
  console.log(test)
  // this.setState({ testMap: test });                                                     
}

addBed(0, 0); // this will make the first corner to be turned to 1

Answer 1

要达到预期的效果，请使用以下查找坐标和单元格编号的选项

1. 在 x 和 y 轴上使用 for 循环绘制网格
2. 添加 mousedown 事件以查找 x、y 坐标
3. 根据单元格的 x、y 坐标和宽度查找单元格

    var bw = 480;
    var bh = 480;
    var p = 0;
   var cw = 40
       var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
function drawBoard(){
        for (var x = 0; x <= bw; x += cw) {
            context.moveTo(0.5 + x + p, p);
            context.lineTo(0.5 + x + p, bh + p);
        }

        for (var x = 0; x <= bh; x += cw) {
            context.moveTo(p, 0.5 + x + p);
            context.lineTo(bw + p, 0.5 + x + p);
        }

        context.strokeStyle = "black";
        context.stroke();
    }

    drawBoard();

function getCursorPosition(canvas, event, cw) {
    const rect = canvas.getBoundingClientRect()
    const x = event.clientX - rect.left
    const y = event.clientY - rect.top
    const cy = (y + (cw - y%cw))/cw
    const cx = (x + (cw - x%cw))/cw
    //console.log("x: " + cx + " y: " + cy, (cx*40) - 40, (cy*40) -40)
  if(cx === 1 || cx === 12 || cy ===1 || cy === 12){
       var context2 = canvas.getContext("2d");
       context2.beginPath();
       context2.fillStyle = "red";
       if(cx=== 1 && cy=== 1){
          context2.fillRect(0, 0, 3*cw, 6*cw);       
       }
     if(cx=== 12 && cy=== 1){
          context2.fillRect(9*cw, 0, 3*cw, 6*cw);       
       }
     if(cx=== 1 && cy=== 12){
          context2.fillRect(0, 6*cw, 3*cw, 6*cw);       
       }
     if(cx=== 12 && cy=== 12){
          context2.fillRect(9*cw, 6*cw, 3*cw, 6*cw);       
       }

  }


   
}

canvas.addEventListener('mousedown', function(e) {
    getCursorPosition(canvas, e, cw)
})

<canvas id="canvas" width="500" height="500" style="border:1px solid #000000;">
</canvas>

codepen - https://codepen.io/nagasai/pen/MMMGXx

参考此链接绘制网格 - Draw Grid / Table on Canvas HTML5