jquery - 画布出现在内容之上

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 是用于画布的 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);
});