如何让画布看不见，但不能看到mousemove事件？

Question

我在画布中有一些彩色线条，我使用mousemove事件进行扫描，该事件返回线条的十六进制颜色代码。 无论如何我可以让这个画布看不见，但当指针越过画布时，仍然会返回正确的颜色代码吗？

我已尝试将上下文globalAlpha设置为透明或接近透明（0,0.1 ......），并在following fiddle中添加混合结果：

• 在Firefox中，由于透明度，收集的十六进制会返回更改的颜色
• 在Chrome中，无论透明度如何，它都会返回正确的颜色（这实际上就是我想要的行为）。

奇怪的是，在我的原始代码中，即使在Chrome中，globalAlpha=0的画布线也不再返回其原始颜色。

有人可以解释一下globalAlpha的预期行为是什么吗？更重要的是，是否有另一种方法可以使画布看不见，但仍允许用鼠标事件收集颜色？任何帮助表示赞赏！

Answer 1

将CSS属性opacity设置为0。

将属性应用于画布时

#examplecanvas {
  opacity: 0;
}

它会从屏幕上消失，但当你将鼠标悬停在屏幕上时（或点击它）仍会检测到颜色。