Question

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

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

一种解决方案是为画布设置z-index为-1，但这会阻止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);
});

画布出现在内容之上

1 个答案: