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

Question

There is a rectangular grid that will be of size 12 by 12 , in which each corner will be clickable, which is 6*3 cells from each corner of 12*12 grid (single click on any the 4 corners should select 6*3 cells ), which will be indicated by a color change.

After clicking one of the corners, the remaining cell ie (144-18 =126) 126 cells, will be checked whether it is equally divisible by a number.

For example, 126/6 =21 , so now each 21 part should be represented by a different color. The number which has to be checked against depends upon the user, if the user gives a number which is not divisible, it will not show any change.

The logic I tried to apply is, I created a multidimensional array of size 12*12 , which contains full of zero's. when the user passes one of the corner coordinates 6*3 cell will turn to one. But I don't know how to implement this logic in html canvas, also how to proceed further.

 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

To achieve expected result, use below option of finding coordinates and cell number

1. Draw grid using for loop on both x and y axis
2. Add mousedown event to find x, y coordinates
3. Find cell from x, y coordinates and width of cell

  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

Refer this link for drawing grid - Draw Grid / Table on Canvas HTML5