8

作成中の Web ページの背景に HTML5 キャンバスを作成し、その上にすべての要素を配置する方法はありますか。

したがって、それは<body>?のように機能します。

z-index を使用してこれを行い、要素を上に配置しようとしましたが、クリック可能またはフォーカス可能でした。それらがまだ機能している必要がありますが、キャンバスもバックグラウンドでクリック可能であり、その上に要素がある場所ではクリックできないようにする必要があります。

4

2 に答える 2

8

をに設定するだけ<canvas>です。キャンバスがコンテナで覆われている場合は、 を使用してカスタム イベントをシミュレートします。[1]z-index-1createEvent

デモ: 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);
});
于 2013-06-09T06:06:47.117 に答える
0

確かにそれは可能z-indexですが、キャンバスの上にあるコンテナで作業しているため、おそらくキャンバスはクリックできません。したがって、要素がないように見えても、コンテナはまだそこにあるため、キャンバスをクリックできません。

于 2013-06-09T05:44:44.573 に答える