我的事件处理程序在与画布交互时遇到问题。基本上发生的事情是带有事件处理程序的画布下方的画布以某种方式影响其上方的画布，并且有时会破坏事件。
我正在使用 onmouseover 事件来隐藏上部画布并使用 onmouseout 来重新显示元素。请注意，我使用 onmousemove 获得了相同的效果。
我已将我的代码转换为 jsfiddle：http://jsfiddle.net/morgaman/zPuH8/...但令人沮丧的是它没有运行。因此，工作版本本身就在此处实时托管：http://chrismorga.com/rainnav/rbowtester.html。
我听说“jCanvas”（http://calebevans.me/projects/jcanvas/index.php）是 jQuery 解决我的问题的方法，但我不知道如何对其进行编程或制作递归动画。帮忙？
【问题讨论】：
标签： jquery html canvas dom-events jcanvas
将包含myCanvasL2 的 div 设置为与画布相同的高度和宽度。否则它将根据画布调整其大小，当其设置为不显示时，它将调用mouseout，因为它的高度本质上将为0。
<div style="z-index:1; position: absolute; left: 18%; top:50px;width:800px;height:50px;"
onmouseover="document.getElementById('myCanvasL2').style.display = 'none';"
onmouseout="document.getElementById('myCanvasL2').style.display = 'block';">
<canvas id="myCanvasL2" width="800" height="50"></canvas>
</div>
【讨论】：
Loktar 在这里得到了很好的答案，但我真的很好奇你在做什么。
如果您让两个画布始终保持相同的大小和顺序，并且只在顶部画布上放置事件处理程序，那么您今后的生活会轻松很多。
如果您需要“隐藏”两个画布之一，请完全清除它（clearRect，yada yada）。
当该画布被清除时，如果您需要与其下方的画布进行交互，请保留一个标志 topCanvasCleared 或其他东西，而当它是 true 时，您在顶部画布上获得的任何事件都可以传递给函数它作用在第二个画布上，就好像事件源自它一样。由于它们的大小相同，因此应该可以完美地工作。
...但是您真的需要两个画布吗？最终目标是什么？为什么你不能有一个画布在不同的时间显示两种截然不同的状态呢？如果您从一开始就只需要担心一个 DOM 元素，那么生活会轻松得多。在一张画布上拥有迄今为止所拥有的所有功能当然不难。
我认为这里的解决方案是对您迄今为止的内容进行重组，使其成为一个或最多两个永远不会改变形状、大小或可见性的画布，事件处理程序仅在最上面的一个。我敦促您考虑一下这两个想法。
【讨论】：