Javascript 如何在HTML中访问底部画布层？

我有这样的html：

<div id="main_window">
 <canvas id="canvas_hex_logic" width="200" height="100"></canvas>
 <canvas id="canvas_ground" width="200" height="100"></canvas>
</div>

在#canvas#u hex#u logic中，我正在渲染六边形的掩码：

我将在其上放置地面层：

JS代码的一部分，用于在鼠标下拾取颜色：

  ..... mouse event handler above .....
  var c_hex = document.getElementById("canvas_hex_logic");
  var ctx_hex = c_hex.getContext("2d");
  ..... ..... ..... ..... ..... .....
  var color = ctx_hex.getImageData(mouseX, mouseY, 1, 1).data;

如果#canvas#hex(十六进制)逻辑位于其他层的tom上，则此代码可以工作

所以，问题是-当它与另一层叠加时，如何从#canvas_hex_逻辑层中选择鼠标下的颜色

---

谢谢

获取顶部画布中单击的坐标，并在下方画布中相应像素处找到颜色

单击事件具有与之关联的数据，这些数据包含单击事件的坐标

看。或者更确切地说，更多细节请参见

谢谢！ 准确地说，我找到了最简单的方法：

#canvas_ground {
left: 201px;
pointer-events: none;  <<--------- this helps
position: absolute;
top: 31px;
z-index: 1;
}

#画布#地面{
左：201px；
指针事件：无；
#canvas_ground {
left: 201px;
pointer-events: none;  <<--------- this helps
position: absolute;
top: 31px;
z-index: 1;
}