Jquery 画布显示在内容上

即使

canvas

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

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

废话

废话

一种解决方案是将画布的

z-index

设置为-1，但这将阻止触发

mousemove

为什么画布在上面？我怎样才能在仍然能够触发mousemove的情况下将其放置在内容后面

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

试试：

$("#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);
});

---

另外请注意，在移动设备上使用Fixed是不安全的，请改用absolute。我添加了trigger以显示事件的使用，但您可以直接调用函数而不使用事件$（文件）.on（“mousemove”，函数（e）{doWhatYouGotToDo（e.pageX，e.pageY）；}）；