jquery - onmouseover 与动画 Canvas 的完整性

Question

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

我使用 onmouseover 事件来隐藏上部 Canvas ，并使用 onmouseout 来重新显示元素。请注意，我使用 onmousemove 得到了相同的效果。

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

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

Answer 1

让您的 div 包含与 Canvas 相同的高度和宽度的 myCanvasL2 。否则，它将根据 Canvas 调整其大小，并且当其设置为不显示时，它将调用 mouseout 因为其高度本质上为 0。

<强> Working Version

<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>​