HTML5 Canvas 图层难题(z-index)

Question

我在一个网站上工作，其中包括三层视觉效果:

1. 第 1 层 - 具有垂直滚动的布局文本信息的 div
2. 第 2 层 - 固定在视口(viewport)底部的页脚图像(30% 高度)
3. 第 3 层 - 固定全屏的 Canvas 动画层

难题:

• 我希望动画显示在页脚图像上
• 我希望页脚图像位于文本 div 之上
• 我希望文本 div 位于动画之上

我知道在现实世界中，如果这些是物理 Papercut ，则不可能实现这一目标。是否有可行的方法在网站中以编程方式实现此目的？

编辑: 我看到我激起了与设计相关的答案。理所当然:) 我将线框图显示在这里。现在，我将对其进行更多解释:

页脚图片是我所在城市的天际线。 Canvas 动画用于渲染飞过整个屏幕区域的鸟。 文本信息(和背景 div)应该在城市天际线后面向下滚动。 但我不希望飞鸟悬停在屏幕上的文字上:)

有没有办法让 Canvas 只对一个其他元素(文本)透明？

Answer 1

我想我明白你在说什么。一种可能是将动画拆分为多个 <canvas>元素，每个元素都有自己的位置和 z-index 基于它们在屏幕上的位置(所以在页脚底部，你会有 z-index 0，然后在页面的一半左右你会有另一个 Canvas 与 z-index -5 或类似的。)绝对定位/JavaScript 辅助将是正确调整大小和放置所有内容的最简单方法，尽管它不是唯一的选择。

canvas 2d api 实际上也使这很容易做到......根本不需要改变你的绘图逻辑!只需转换与左上角不完全对齐的任何 Canvas 的上下文，然后在所有 Canvas 中正常绘制场景。例如，就在绘制之前，运行

context.save();
//Determine canvas pixel position, possibly with jQuery
context.translate(-myCanvasXPosition, -myCanvasYPosition);

...//draw

context.restore();

这将调整您的场景，使点 (0,0) 始终是所有 Canvas 的浏览器左上角(而不是每个 Canvas 通常的左上角)，因此您的所有绘图逻辑无论它在哪个 Canvas 中，都会绘制正确的东西。如果性能开始成为问题，您可以添加逻辑以仅尝试绘制可能实际显示在当前绘制的 Canvas 中的元素。

使用这种方法，看起来是一张背景图实际上是多张图无形地拼接在一起，这可以让你让图的不同部分具有不同的z-index。