我制作了一个 JS 动画，我想作为我主页的背景:http://geotheory.co.uk/ .但我对网络开发还很陌生，不清楚如何阻止 Canvas 元素成为页面上的“内联”对象并将其设置在其他 HTML 元素后面。非常感谢指教。 HTML 是:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>geotheory.co.uk</title>
<style>
canvas:focus{outline:none;}
* {
margin: 0;
padding: 0;
}
h1 {color:#fff;}
p {color:#fff;}
</style>
</head>
<body id="home" bgcolor="black">
<!-- style="overflow:hidden;" -->
<h1>Heading</h1>
<p>paragraph 1</p>
<p>paragraph 2</p>
<script src="processing-1.4.1.min.js"></script>
<div id="canvasContainer">
<canvas data-processing-sources="rectangles.pde"></canvas>
</div>
</body>
最佳答案
2018年我会用
html, body {
margin: 0;
height: 100%;
}
canvas {
width: 100%;
height: 100%;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: -9999;
}
原因如下:
我曾经推荐canvas { width: 100vw; height: 100vh; ...}但遗憾的是移动浏览器坏了vh所以它没用，而且显然永远没用。参见 this blog post .
display: block;修复了某些浏览器上滚动条的一些问题。一些页面使用 html, body { overflow: none; }但如果您的页面最终需要比屏幕/窗口高，那同样没有意义。
position: fixed;使 Canvas 位置相对于窗口顶部，因此它不会随页面滚动。如果你使用 position: absolute如果页面高于屏幕/窗口，则 Canvas 将从顶部滚动。例如this page .
top: 0; left 0;把它放在左上角。如果没有它，它会默认到它在 body 边缘内的默认位置。通常这可以通过设置 body { margin: 0; } 来解决。但通常这意味着您最终需要一些其他容器来添加边距，否则您的正常内容将位于窗口的边缘。
z-index: -9999;是否有试图强制它比其他任何东西更远，以防页面本身使用一些负值 z-index
这里有一个例子作为片段
var ctx = document.querySelector("canvas").getContext("2d");
function resize(canvas) {
var width = canvas.clientWidth;
var height = canvas.clientHeight;
if (width != canvas.width || height != canvas.height) {
canvas.width = width;
canvas.height = height;
}
}
function render(time) {
time *= 0.001;
resize(ctx.canvas);
ctx.save();
var w = ctx.canvas.width;
var h = ctx.canvas.height;
var hw = w / 2;
var hh = h / 2;
ctx.clearRect(0, 0, w, h);
ctx.strokeStyle = "red";
ctx.translate(hw, hh);
ctx.rotate(time * 0.1);
for (var ii = 0; ii < 100; ++ii) {
ctx.rotate(Math.sin(time * 0.1) * 0.2);
ctx.strokeRect(-hw, -hh, w, h);
ctx.scale(0.9, 0.9);
}
ctx.restore();
requestAnimationFrame(render);
}
requestAnimationFrame(render);html, body {
margin: 0;
height: 100%;
}
canvas {
width: 100%;
height: 100%;
display: absolute;
position: fixed;
top: 0;
left: 0;
z-index: -9999;
}<canvas></canvas>
<pre>
some content that is in front of the canvas
Let's
try
to
make
sure
it's
long
enough
that
we
can
scroll
down
the
page
so
we
can
see
that
position: fixed;
is
a
better
choice
than
position: absolute;
</pre>和here's an example outside SO这样您就可以更轻松地查看完整尺寸。
请注意，如果您的 Canvas 动画是交互式的，那么 Canvas 前面的元素会占用鼠标/触摸事件。据我所知，没有简单的解决方案。您可以将除 canvas/iframe 之外的所有内容标记为 pointer-events: none并将 Canvas /iframe 标记为 pointer-events: auto但是随后您遇到了无法选择页面上的任何文本并且无法单击任何链接的问题。然后你可以说 set <a>标签有 pointer-events: auto所以链接有效，但我敢肯定这里和那里都会有问题，具体取决于您页面上的信息(尝试复制电子邮件地址或位置地址等...)
关于css - 将 HTML Canvas 设置为页面背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14043359/