帶有動畫畫布的鼠標懸停完整性

Question

我的事件處理程序在與畫布交互時遇到問題。 基本上發生的事情是帶有事件處理程序的畫布下方的畫布以某種方式影響其上方的畫布，有時會破壞事件。

我正在使用 onmouseover 事件來隱藏上部畫布和 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

為包含myCanvasL2的 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>​

Answer 2

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

如果您將兩個畫布始終保持相同的大小並始終保持相同的順序，並且只將事件處理程序放在頂部畫布上，那么您的未來生活會容易得多。

如果您需要“隱藏”兩個畫布之一，請完全清除它（ clearRect ， yada yada ）。

當該畫布被清除時，如果您需要與它下面的畫布進行交互，請保留一個標志topCanvasCleared或其他東西，雖然您在頂部畫布上獲得的任何事件都是true ，但您可以將其傳遞給作用於第二個畫布的函數作為如果事件源於它。 由於它們的大小相同，因此應該可以完美地工作。

...但是你真的需要兩張畫布嗎？ 最終目標是什么？ 為什么不能讓一個畫布在不同時間顯示兩種截然不同的狀態呢？ 如果您從一開始就只需要擔心一個 DOM 元素，那么生活確實會容易得多。 在一張畫布中擁有迄今為止的所有功能當然並不難。

我認為這里的解決方案是將您目前所擁有的重新組織為只有一個畫布或最多兩個永遠不會改變形狀、大小或可見性的畫布，事件處理程序只在最上面的一個。 我敦促你考慮一下這兩個想法。