如何计算HTML5画布中矩形内每个小正方形drwan的中心像素（x，y）

我已经编写了一个代码，它将创建一个矩形，通过提供值，它将在该矩形中生成行和列，基本上是在该矩形中创建小正方形

代码可以在这里看到

示例


画
var x=50；
变量y=50；
var w=150//宽度
var h=100//高度
var列=3；
var行=3；
var vnp=w/列//垂直下一点
var hnp=h/行//水平下一点
var canvas=document.getElementById（“t_canvas”）；
var ctx=canvas.getContext（“2d”）；
$（文档）.ready（函数（）{
$（'#draw'）。单击（函数（）{
drawVerticalLines（parseFloat（vnp））；
提取水平线（hnp）；
ctx.fillStyle=“#FF0000”；
ctx.冲程（x，y，w，h）；
ctx.stroke（）；
});
});
函数调用（np）{
var np=x+np//第一列的起点
而（np

我已经给出了行=3，列=3的值，因此它将创建一个类似于tic-tac-toe的正方形。我的要求是，当我在任何位置点击任何小正方形时，它应该给我该特定正方形的确切中心位置，我被卡在这里了，有什么算法可以做到这一点吗

谢谢，

---

Simer

获得中心点的正确方法可以通过多种方式体现出来，但本质上这就是你需要做的：

 var mousePos = getMousePos(canvas, evt),  // get adjusted mouse position
     gw = vnp * 0.5,                       // get center of one cell
     gh = hnp * 0.5,
     ix = ((mousePos.x - x) / vnp)|0,      // get cell index clicked
     iy = ((mousePos.y - y) / hnp)|0,
     cx = ix * vnp + x + gw,               // scale up to get pixel position
     cy = iy * hnp + y + gh;

以下行的快速细分（仅显示x，y也显示）：

通过从鼠标位置减去栅格的起点来调整栅格。这将为您提供栅格中的位置：

mousePos.x-x

使用单个单元格的宽度量化值以获得索引。

|0

切断了分数，因此我们得到了下一步需要的整数值：

（（mousePos.x-x）/vnp）0

现在我们有了一个整数索引[0,2]（您需要对网格进行边界检查或索引范围检查），我们只需将其与单元格宽度相乘即可获得网格单元格开始的像素位置：

cx=ix*vnp

最后，将网格的网格起始位置添加回单元格屏幕上的角落，并添加半个单元格大小以获得该单元格的中心：

cx=ix*vnp+gw

另一个好处是，您现在有了索引（

ix

和

iy

），可以与数组一起使用，以更轻松地检查游戏状态

 var mousePos = getMousePos(canvas, evt),  // get adjusted mouse position
     gw = vnp * 0.5,                       // get center of one cell
     gh = hnp * 0.5,
     ix = ((mousePos.x - x) / vnp)|0,      // get cell index clicked
     iy = ((mousePos.y - y) / hnp)|0,
     cx = ix * vnp + x + gw,               // scale up to get pixel position
     cy = iy * hnp + y + gh;

ix = ((mousePos.x - x) / vnp)|0
cx = ix * vnp + x + gw