javascript-如何将四叉树节点绘制到 HTML 画布网格？

大家好，我正在使用 hashlife 算法创建一个 JavaScript Game of Life 电路 Web 应用程序，并且我坚持将四叉树宇宙绘制到我的画布网格中。四叉树节点/宇宙由一个称为节点的类组成，该类包含网格的西南、东南、西北、东北块。例如 [四叉树示例][1] [1]：https://i.stack.imgur.com/rUQn0.png 我递归地调用一个辅助函数，以便我可以将我的二维数组转换为四叉树宇宙。一旦我有了我的宇宙，我就可以开始实现 hashlife 算法了。我得到我的结果没有任何问题，我唯一的问题是画出结果。如何将结果放入我的画布网格中。我尝试将每个块转换为 4x4 矩阵并递归地这样做，直到我有一个覆盖整个宇宙的 4x4 矩阵数组，但我仍然必须处理在正确位置绘制每个矩阵。请提供任何帮助将非常有用。

下面的代码将我的二维数组网格转换为四叉树宇宙

  contruct(level, grid) {
if (level === 1) {
  return this.create(
    grid[0][1].state,
    grid[1][1].state,
    grid[0][0].state,
    grid[1][0].state
  );
}

let NWarr = [];
let NEarr = [];
let SWarr = [];
let SEarr = [];

let newSize = grid.length / 2;

for (let i = 0; i < newSize; i++) {
  NWarr[i] = grid[i].slice(0, newSize);
  NEarr[i] = grid[i + newSize].slice(0, newSize);
  SWarr[i] = grid[i].slice(newSize);
  SEarr[i] = grid[i + newSize].slice(newSize);
}

return this.create(
  this.contruct(level - 1, SWarr),
  this.contruct(level - 1, SEarr),
  this.contruct(level - 1, NWarr),
  this.contruct(level - 1, NEarr)
);

}

我需要找到一种方法将其转换回2D阵列网格这是我正在研究的

destruct(node) {
if (node.depth === 2) {
  return this.nodeToGrid(node);
}
let topLvl = this.create(node.sw.sw, node.sw.se, node.sw.nw, node.sw.ne);
let destructSE = this.create(
  node.se.sw,
  node.se.se,
  node.se.nw,
  node.se.ne
);
let destructNW = this.create(
  node.nw.sw,
  node.nw.se,
  node.nw.nw,
  node.nw.ne
);
let destructNE = this.create(
  node.ne.sw,
  node.ne.se,
  node.ne.nw,
  node.ne.ne
);

this.destruct(destructNW);
this.destruct(destructNE);
this.destruct(topLvl);
this.destruct(destructSE);

return this.matrix;

}