制作< canvas> html文档的背景 [英] Make <canvas> the background of an html document

问题描述

有没有办法让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 。如果您的画布由顶部的容器覆盖，请使用 模拟自定义事件createEvent 。 ^{[1 ]}

Just set the <canvas>'s z-index to -1. If your canvas is covered by containers on top, simulate custom events using 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);
});

这篇关于制作< canvas> html文档的背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！