1

我的事件处理程序在与画布交互时遇到问题。基本上发生的事情是带有事件处理程序的画布下方的画布以某种方式影响其上方的画布，并且有时会破坏事件。

我正在使用 onmouseover 事件来隐藏上部画布和 onmouseout 以重新显示元素。请注意，我使用 onmousemove 获得了相同的效果。

我已将我的代码转换为 jsfiddle： http: //jsfiddle.net/morgaman/zPuH8/ ...但令人沮丧的是它没有运行。因此，工作版本本身就在这里托管： http ://chrismorga.com/rainnav/rbowtester.html 。

我听说“jCanvas”（http://calebevans.me/projects/jcanvas/index.php）是我的问题的 jQuery 答案，但我不知道如何对其进行编程或制作递归动画。帮助？

4

2 回答 2

2

给你的 div 保持myCanvasL2与画布相同的高度和宽度。否则它将调整其大小以适应画布，并且当其设置为不显示时，它将调用，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>​
于 2012-06-19T16:00:50.803 回答
2

Loktar 在这里得到了很好的答案，但我真的很好奇你在做什么。

如果您保持两个画布始终具有相同的大小和顺序，并且只将事件处理程序放在顶部画布上，那么您的生活会变得容易得多。

如果您需要“隐藏”两个画布之一，请完全清除它（clearRect，yada yada）。

当该画布被清除时，如果您需要与其下方的画布进行交互，请保留一个标志topCanvasCleared或其他东西，虽然这是true您在顶部画布上获得的任何事件，但您可以将其传递给作用于第二个画布的函数，就好像事件由此而来。由于它们的尺寸相同，它应该可以完美地工作。

...但是你真的需要两张画布吗？最终目标是什么？为什么你不能有一个画布在不同的时间显示两种截然不同的状态呢？如果您从一开始就只需要担心一个 DOM 元素，那么生活会轻松得多。在一张画布上拥有迄今为止所拥有的所有功能当然不难。

我认为这里的解决方案是重新组织你到目前为止只有一个画布或最多两个永远不会改变形状、大小或可见性的画布，事件处理程序只在最上面的一个。我敦促您考虑一下这两个想法。

于 2012-06-19T16:18:38.540 回答