使<canvas>成为html文档的背景

Jay*_*atz 8 javascript css html5 html5-canvas

有没有办法让HTML5画布成为我正在制作的网页的背景,并将所有元素放在它上面.

所以它的行为就像<body>

我尝试使用z-index并将元素放在顶部,但随后它们可以点击或聚焦.我需要它们仍然可以正常运行,但画布也可以在后台单击,而不是可点击的,其中有元素.

Der*_*會功夫 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);
});
Run Code Online (Sandbox Code Playgroud)