javascript - 我如何找到我在 HTML5 Canvas 中单击的网格正方形元素

Question

我使用 StrokeLineX 和 StrokeLineY 在 html5 canvas 中绘制了一个网格。当我在网格中单击它时，我想突出显示特定的正方形/矩形。我曾尝试使用 math.floor 为空间定义索引，但一旦宽度或高度增加，它就会开始给出不同的答案。我试了很多次才终于把它贴在这里。这是代码。

var canvas = document.getElementById("myCanvas");
      canvas.addEventListener('click', on_canvas_click, false);
      var ctx = canvas.getContext("2d");

      var tray_length = 800;
      var tray_depth = 800;
      var boxHeight = 50;
      var boxWidth = 50;

var canvas_X = tray_length;
      var canvas_Y = tray_depth;

      var box_x_pixels = canvas_X/no_of_columns;
      var box_y_pixels = canvas_Y/no_of_rows;

// Drawing the grid
      for (var y = boxWidth; y < canvas_Y; y += boxWidth) {
          strokeLineX(ctx, y);
      }

      for (var x = boxHeight; x < canvas_X; x += boxHeight) {
              strokeLineY(ctx, x);

          }

function strokeLineX(ctx, y) {
          ctx.beginPath();
          ctx.strokeStyle = 'green';
          ctx.moveTo(0, y);
          ctx.lineTo(canvas_X, y);
          ctx.stroke();
          ctx.closePath();
      }



      function strokeLineY(ctx, x) {
          ctx.beginPath();
          ctx.strokeStyle = 'red';
          ctx.moveTo(x, 0);
          ctx.lineTo(x, canvas_Y);
          ctx.stroke();
          ctx.closePath();
      }

function on_canvas_click(ev) {
          var x = ev.pageX - canvas.offsetLeft;
          var y = ev.pageY - canvas.offsetTop;

          console.log(x+":"+y);
          var coordinateDisplay = "x=" + x + ", y=" + y;

            if (y>= 0 && y <= y+boxHeight ) {    

                var indexOfX = Math.floor(x/boxWidth); //divide on width and round off
                var indexOfY = Math.floor(y/boxHeight);
                // alert('You clicked bar index: ' + indexOfX+"-"+indexOfY);


               ctx.fillRect="green";
               ctx.rect(x,y,box_x_pixels,box_y_pixels);
               ctx.stroke();

                console.log(indexOfX + "-" + indexOfY);


            }


      }

Answer 1

在 on_canvas_click 中更改以下内容:

代替

    ctx.fillRect="green";

做:

    ctx.fillStyle="green";

而不是:

    ctx.rect(x,y,box_x_pixels,box_y_pixels);

做:

    ctx.fillRect(boxWidth*indexOfX, boxHeight*indexOfY, boxWidth, boxHeight);

...而且您不需要:

    ctx.stroke();

这是一个应用了这些更改的工作片段，但也有一些与您的问题无关的简化:

• 删除未使用的变量；
• 使用一个函数来画线，而不是两个；
• 使用 canvas.width 和 canvas.height 属性；
• 也在外部网格边界上绘制网格线

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var boxHeight = 50;
var boxWidth = 50;
var canvas_X = canvas.width;
var canvas_Y = canvas.height;

canvas.addEventListener('click', on_canvas_click, false);

// Drawing the grid
for (var y = 0; y <= canvas_Y; y += boxWidth) {
    strokeLine(ctx, 0, y, canvas_X, y, 'green');
}

for (var x = 0; x <= canvas_X; x += boxHeight) {
    strokeLine(ctx, x, 0, x, canvas_Y, 'red');
}

function strokeLine(ctx, x0, y0, x1, y1, color) {
    ctx.beginPath();
    ctx.strokeStyle = color;
    ctx.moveTo(x0, y0);
    ctx.lineTo(x1, y1);
    ctx.stroke();
    ctx.closePath();
}

function on_canvas_click(ev) {
    var x = ev.pageX - canvas.offsetLeft;
    var y = ev.pageY - canvas.offsetTop;
    if (y>= 0 && y <= y+boxHeight ) {    
        var indexOfX = Math.floor(x/boxWidth); //divide on width and round off
        var indexOfY = Math.floor(y/boxHeight);
        ctx.fillStyle="green";
        ctx.fillRect(boxWidth*indexOfX, boxHeight*indexOfY, boxWidth, boxHeight);
    }
}

<canvas id="myCanvas" width="600" height="200"></canvas>