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

标签 javascript css html html5-canvas

有没有一种方法可以让 HTML5 Canvas 成为我正在制作的网页的背景,并将所有元素放在它上面。

所以它的行为就像<body>

我尝试使用 z-index 执行此操作并将元素定位在顶部,但随后它们可以点击或聚焦。我需要它们仍能正常工作,但 Canvas 也只能在后台点击,而在上面有元素的地方不可点击。

最佳答案

只需设置 <canvas>z-index-1 .如果您的 Canvas 被顶部的容器覆盖,请使用 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);
});

关于javascript - 使 <canvas> 成为 html 文档的背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17006812/

相关文章:

html - 如何使文本响应?

html - 如何对齐图像和无序列表

css - 如何将样式添加到特定列表元素,即 <nav> 中的单个 <li> ?

javascript - 使用滚动条自动水平滚动

html - 如何让我的 css 渐变在 IE 中工作?

javascript - JS生成随机 boolean 值

php - 关闭ajax调用的连接

jquery - 对表中的特定行进行排序 + HTML + jQuery

php - 在 JavaScript/HTML 前端和 PHP/MySQL 后端之间发送或链接文件

javascript - 在纯 JavaScript 中,jQuery 的 .height() 和 .width() 等价于什么?