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

Question

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

Answer 1

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}`)
}