canvas中的m*n矩阵索引如何计算？

如图，一个9×9的矩阵，宽高暂定30。
想要实现点击任意一个格子，获取点击小格子在1到9小格子的序号，大格子在1-9格子的序号，以及其对应坐标呢？
假设点击第六个里面的第七个小方格，大方格为6，小方格为7，坐标为210,180；
假设点击第七个里面的第六个小方格，大方格为7，小方格为6，其坐标为90,240
目前实际循环如下图

function getPos(posX, posY) {
  let outerX = Math.ceil(posX / 90),
    outerY = Math.ceil(posY / 90),
    indexInOuter = (outerY - 1) * 3 + outerX,
    innerX = Math.ceil((posX - (outerX - 1) * 90) / 30),
    innerY = Math.ceil((posY - (outerY - 1) * 90) / 30),
    indexInInner = (innerY - 1) * 3 + innerX
  
  console.log(`大格子中索引：${indexInOuter}；小格子索引${indexInInner}`)
}

假设点击的格子在9*9矩阵中的下标是(i,j)，
那么点击格子的大格子索引是(i/3, j/3)
点击格子的小格子索引是(i-i/3*3, j-j/3*3)
坐标是(30/9*i, 30/9*j)

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 看下这篇博客，也许你就懂了，链接：canvas绘图有锯齿毛边问题的解决

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^