8

有没有一种方法可以让 HTML5 画布成为我正在制作的网页的背景，并将所有元素放在上面。

所以它的行为就像<body>?

我尝试使用 z-index 执行此操作并将元素定位在顶部，但随后它们可以单击或聚焦。我需要它们仍然正常工作，但画布也只能在背景中单击，并且在上面有元素的地方不可单击。

4

2 回答 2

8

只需将<canvas>'s设置z-index为-1. 如果您的画布被顶部的容器覆盖，请使用createEvent. [1]

演示：http: //jsfiddle.net/DerekL/uw5XU/

var canvas = $("canvas"),  //jQuery selector, similar to querySelectorAll()
//...

function simulate(e) {
    var evt = document.createEvent("MouseEvents");
    evt.initMouseEvent("mousemove", true, true, window,
        0, e.screenX, e.screenY, e.clientX, e.clientY, false, false, false, false, 0, null);
    canvas[0].dispatchEvent(evt);
}

$("body > *").each(function () {
    this.addEventListener("mousemove", simulate);
});
于 2013-06-09T06:06:47.117 回答
0

当然，这将是可能的z-index，很可能画布将无法点击，因为您正在使用位于其顶部的容器。因此，即使似乎没有元素，容器仍然存在，这会阻止您单击画布。

于 2013-06-09T05:44:44.573 回答