畫布出現在內容

Question

即使canvas元素放置在網頁內容之前，它顯示在最上面。

<canvas id="cnv"></canvas> 
<div id="content"> 
    blah blah 
    <p> 
     blahs 
    </p> 
</div> 

一個解決辦法是設置z-index爲-1畫布，但會被觸發停止mousemove。

爲什麼帆布在上面？我怎樣才能把它放在內容的後面，同時還能夠觸發mousemove？

http://jsfiddle.net/YUx82/

注意：我不允許改變的唯一CSS是一個在畫布。
另一種解決方案是將z-index設置爲-1，然後以某種方式將mousemove從文檔傳遞到畫布。

Answer 1

試一下：

$("#cnv").on("transferMouseCoordinates", function(e, x, y){ 
    // voila! 
}); 

$(document).on("mousemove", function(e) { 
    // use e.pageX and e.pageY to get mouse position 
    $("#cnv").trigger("transferMouseCoordinates", e.pageX, e.pageY); 
});