我制作了一个JS动画,我想成为我主页的背景:http://geotheory.co.uk/.但我对Web开发并不熟悉,也不清楚如何阻止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>
gma*_*man 14
在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所以它没用,显然永远没用.看到这篇博文.
display: block;修复了某些浏览器上滚动条的一些问题.有些页面会html, body { overflow: none; }再次使用,如果您的页面最终需要比屏幕/窗口更高,则无效.
position: fixed;使画布相对于窗口顶部的位置,以便它不会随页面滚动.如果您使用,position: absolute那么如果页面高于屏幕/窗口,则画布将从顶部滚动.例如这个页面.
top: 0; left 0;把它放在左上角.没有它,它将默认为它在身体边缘内的默认位置.通常这可以通过设置来解决,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>而且这里有一个例子外SO以便您可以查看它更容易全尺寸.
请注意,如果您的画布动画是交互式的,那么画布前面的元素会占用鼠标/触摸事件.我知道没有简单的解决方案.您可以将除canvas/iframe之外的所有内容pointer-events: none标记为并将canvas/iframe 标记为,pointer-events: auto但是您遇到的问题是,无法选择页面上的任何文本,也无法单击任何链接.然后你可以说设置<a>标签pointer-events: auto让链接工作,但我确定这里和那里会有问题,这取决于你页面上的信息(尝试复制电子邮件地址,或者位置地址等等)
Muh*_*bar 12
canvas {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
}