Создание фона html-документа

есть ли способ сделать холст HTML5 фоном веб-страницы, которую я делаю, и поместить все элементы поверх него.

поэтому он действует как <body>?

Я попытался сделать это с z-индексом и позиционированием элементов сверху, но затем они были щелкающими или фокусируемыми. Мне нужно, чтобы они все еще функционировали, но холст также был доступен только в фоновом режиме, а не там, где над ним есть элементы.

7
css html5 html5-canvas javascript

2 ответов

просто установить <canvas> ' s z-index to -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);
});
7

конечно, это было бы возможно с z-index, скорее всего, холст не будет кликабельным, потому что вы работаете с контейнером, который находится поверх него. Поэтому, даже если кажется, что нет элемента, контейнер все еще существует, что мешает вам щелкнуть по холсту.

-1