jquery - Canvas 出现在内容上

Question

即使 canvas 元素放置在网页内容之前，它也会出现在顶部。

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

一个解决方案是将 canvas 的 z-index 设置为 -1，但这会阻止 mousemove 被触发。

为什么 Canvas 在上面？如何将它放在内容后面，同时仍然能够触发 mousemove？

http://jsfiddle.net/YUx82/

注意:我唯一可以更改的 CSS 是 Canvas 的 CSS。
另一种解决方案是将 z-index 设置为 -1，然后以某种方式将 mousemove 从文档传递到 Canvas 。

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);
});