将 HTML Canvas 设置为页面背景答案

【问题标题】：Set HTML Canvas as page background将 HTML Canvas 设置为页面背景
【发布时间】：2012-12-26 16:33:38
【问题描述】：

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

【问题讨论】：

确保将其放在 HTML 的最后，以免妨碍屏幕阅读器等。
An html5 canvas element in the background of my page?的可能重复
我注意到你的样式表中使用了“outline:none”，所以：有点不相关，但也需要注意：请不要在你的样式表中过度使用 outline:none，因为它非常重要出于可访问性的原因。 outlinenone.com

标签： css html

【解决方案1】：

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; 使画布位置相对于窗口顶部，因此它不会随页面滚动。如果您使用position: absolute，那么如果页面高于屏幕/窗口，画布将从顶部滚动。例如this page。

top: 0; left 0; 把它放在左上角。没有它，它将默认为它的默认位置，即在正文的边缘内。这通常可以通过设置body { margin: 0; } 来解决，但通常这意味着您最终需要一些其他容器来添加一个边距，否则您的正常内容会位于窗口的边缘。

z-index: -9999; 是否会尝试强制它比其他任何东西更靠后，以防页面本身对z-index 使用一些负值

这是一个作为 sn-p 的示例

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，这样您就可以更轻松地查看完整尺寸。

iframes work as well

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

【讨论】：

谢谢你..它真的很有趣，学到了很多..用angularjs试试这个
现代浏览器无论如何都会尽力运行您的代码，但在关闭 HTML 正文后使用脚本标记是无效的。遵循此示例的任何人都应考虑将其放在正文的最后一行。无论哪种方式，都是 CSS 的绝佳示例！
你能指出一些官方文档在正文之后放置一个脚本标签是无效的吗？谷歌自己的风格指南另有说明。
它反对 W3C 建议。也许stackoverflow.com/questions/3037725/… 回答得比我好。它还指出，谷歌文档的各个地方在某些时间点确实将某些标签从正文中删除（但其中一些地方不再这样做）。它还提到 IE10+ 将拒绝处理这些标签，因此这是需要测试的东西，即使它只是 IE。如果非 Chrome 移动浏览器坚持 W3C 而不是当前使用，它们可能会变得更加混乱？
It works fine across all browsers。比起迷信，我更喜欢证据。

【解决方案2】：

canvas {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-1;
}

【讨论】：

好吧，伙计们搜索更多内容并了解我提供的代码中的所有道具的作用:) 这将有助于您以后创建自己的代码！为我的代码 +1 :)
是的，我开始使用 HTML/CSS，所以它现在只是一个陡峭的学习曲线。为小费干杯。