如何使画布对眼睛不可见但对 mousemove 事件不可见？

Question

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

我尝试将上下文的globalAlpha 设置为透明或接近透明（0、0.1...），following fiddle 中的结果参差不齐：

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

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

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

Answer 1

将 CSS 属性 opacity 设置为 0。

当您将属性应用到您的画布时，例如

#examplecanvas {
  opacity: 0;
}

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