12

我制作了一个 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>
4

2 回答 2

16

在 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 之外的示例，因此您可以更轻松地查看完整尺寸。

iframes 也工作

请注意，如果您的画布动画是交互式的，那么画布前面的元素会吃掉鼠标/触摸事件。我知道没有简单的解决方案。您可以将除画布/iframe 之外的所有内容pointer-events: none标记为并将画布/iframe 标记为，pointer-events: auto但随后您会遇到无法选择页面上的文本且无法单击链接的问题。然后，您可以说设置<a>标签以pointer-events: auto使链接正常工作，但我确信根据您页面上的信息（尝试复制电子邮件地址或位置地址等），这里和那里都会出现问题。

于 2016-07-20T06:26:18.680 回答
13 
canvas {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-1;
}
于 2012-12-26T16:35:16.413 回答