问题描述
有没有办法让HTML5画布成为我正在制作的网页的背景,并将所有元素放在它上面。
Is there a way I can make an HTML5 canvas the background of a web page I am making and place all the elements on top of it.
所以它的行为比如< body>
?
我尝试用z-index做这个并将元素放在顶部,但随后他们可以点击或专注。我需要它们仍然可以运行,但画布也可以在后台单击,而不是可点击的地方有元素。
I tried doing this with z-index and positioning the elements on top, but then they were click-able or focus-able. I need them to still be functioning, but the canvas to also be clickable just in the background and not clickable where there are elements over it.
推荐答案
只需将< canvas>
的 z-index
设置为 - 1
。如果您的画布由顶部的容器覆盖,请使用。
Just set the <canvas>
's z-index
to -1
. If your canvas is covered by containers on top, simulate custom events using createEvent
.
演示:
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);
});
这篇关于制作< canvas> html文档的背景的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!