Javascript 如何找到我在HTML5画布中单击的网格方形元素

我用StrokeLineX和StrokeLineY在html5画布上绘制了一个网格。我想在网格中单击特定的正方形/矩形时将其高亮显示。 我曾尝试使用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);


            }


      }

var canvas=document.getElementById（“myCanvas”）；
addEventListener（'click'，在画布上单击，false）；
var ctx=canvas.getContext（“2d”）；
var托盘长度=800；
var塔盘深度=800；
高度=50；
var-boxWidth=50；
var canvas_X=托盘长度；
var canvas_Y=托盘深度；
var box_x_像素=画布_x/没有_列；
var box_y_像素=画布_y/没有行；
//绘制网格
用于（变量y=箱宽；y<画布y；y+=箱宽）{
strokeLineX（ctx，y）；
}
对于（变量x=箱高；x如果画布上的
中的（y>=0&&y，请单击
更改以下内容：

而不是

    ctx.fillRect="green";

做：

而不是：

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

做：

…您不需要：

    ctx.stroke();

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


删除未使用的变量
使用一个函数绘制线条，而不是两个
使用
canvas.width
和
canvas.height
属性
同时在外部栅格边界上绘制栅格线


var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
高度=50；
var-boxWidth=50；
var canvas_X=canvas.width；
var canvas_Y=canvas.height；
addEventListener（'click'，在画布上单击，false）；
//绘制网格
对于（var y=0；y哪里定义了
box\u x\u像素，box\u y\u像素
？如果它们从未使用过，为什么要计算
indexOfX，indexOfY
？我正在使用它来计算坐标，以知道我使用console.log单击的位置。谢谢trincot。它解决了问题。我的画布元素从顶部大约画出160像素，这就是为什么我的indexofX和indexofY变量的结果出现了错误，因为我没有从当前位置减去顶部。不客气。老实说，问题不止于此：您使用了两对变量作为框大小（例如，
boxWidth
与
box\u x\u像素
），这是不兼容的。您使用一个来绘制网格，另一个用来（尝试）填充矩形。
    ctx.fillRect(boxWidth*indexOfX, boxHeight*indexOfY, boxWidth, boxHeight);

    ctx.stroke();