如何访问HTML中的底部canvas层?

我有这样的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> 

和CSS:

 #canvas_hex_logic{ position: absolute; top:31px; left:201px; z-index: 0; } #canvas_ground{ position: absolute; top:31px; left:201px; z-index: 1; } 

在#canvas_hex_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_logic是在其他层的汤姆。

所以,问题是 – 如何从#canvas_hex_logic图层的鼠标中select与另一图层重叠的颜色?

谢谢!

您的问题来自您的“hex”canvas被“地面”canvas隐藏的事实,并且不会收到鼠标事件。

但实际上,您并不在意从哪个canvas上引发了单击事件:只要让您的鼠标处理代码将最上面的canvas的事件挂钩,然后使用这些坐标即可。

(我在这里假设所有的canvas都有相同的大小,并且完全重叠,顺便说一句,你可能想把所有的canvas放在一个单独的div中,并且canvas的绝对位置(left,top)=(0px,0px)。稍后添加canvas会更容易。)

find答案:

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