使 <canvas> html文檔的背景

Question

有沒有辦法讓HTML5畫布成為我正在制作的網頁的背景，並將所有元素放在它上面。

它的行為就像<body> ？

我嘗試使用z-index並將元素放在頂部，但隨后它們可以點擊或聚焦。 我需要它們仍然可以正常運行，但畫布也可以在后台單擊，而不是可點擊的，其中有元素。

Answer 1

只需將<canvas>的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);
});

Answer 2

當然可以使用z-index ，很可能畫布不會被點擊，因為你正在使用一個位於它上面的容器。 因此，即使看起來沒有元素，容器仍然存在，這會阻止您單擊畫布。

使 <canvas> html文檔的背景

問題描述

2 個解決方案

解決方案1
8 已采納 2013-06-09 06:06:47

解決方案2
-1 2013-06-09 05:44:44

使 <canvas> html文檔的背景

問題描述

2 個解決方案

解決方案1 8 已采納 2013-06-09 06:06:47

解決方案2 -1 2013-06-09 05:44:44

解決方案1
8 已采納 2013-06-09 06:06:47

解決方案2
-1 2013-06-09 05:44:44