使用画布动画作为背景答案

【问题标题】：Using canvas animation as background使用画布动画作为背景
【发布时间】：2011-02-28 16:27:31
【问题描述】：

我制作了一个翻转动画，我想将其用作我网站的背景。我已将画布大小设置为 1280*800 并将其保存为网页。我尝试使用 iframe 并让浏览器对其进行缩放以适应 (100%;100%)，但效果不佳。由于 body 设置为 950px 和自动边距，iframe 将仅与 body 左侧对齐，并且 iframe 不会随着放大/缩小而缩放。

还有比使用 iframe 更好的方法吗？ php还是js？

之所以将动画保存为单独的网页是因为我觉得我让它的行数太多（〜1100），基本上有20个左右相同的翻转动画，我不知道更好的方法，而不是单独完成它们并使用样式来放置它们。

【问题讨论】：

请告诉我您的网址，以便我可以在我的机器上将其列入黑名单。听起来它会让我癫痫发作。
请输入代码！你还想达到什么目的？这听起来有些不对劲。
您是否在移动设备上使用背景中的画布动画实现了流畅的效果？

标签： php css animation iframe

【解决方案1】：

如果我正确理解您的问题，您需要将 canvas 元素添加到具有 #canvasDiv { position:fixed; top:0px; left:0px; z-index:1; } 的 div 层，并为其他所有内容提供 2 或更大的 z-index。

结帐http://paulirish.com/ 查看一个很好的代码示例，了解如何做到这一点。

【讨论】：

感谢您的实际回答！我已经弄清楚了，实际上这不是问题。我只在背景 div 上将 z-index 设置为 -1，因为我相信其他所有内容默认为 0。但是感谢您的链接，这是另一个帮助我的链接：radikalfx.com/2009/10/17/html5-animated-background
不确定这是否是一个问题，但是将某些内容设置为负 z-index 会导致它低于可点击空间。因此，如果它是一个交互式 Canvas 元素，他们将无法与之交互。只是一个警告:-)