Question

我正在开发一个网站，其中有三层视觉效果：

第1层 - 带有垂直滚动的布局文本信息的div
第2层 - 页脚图像固定在视口底部（30％高度）
第3层 - 全屏固定的画布动画层

难题：

我希望动画覆盖页脚图像
我希望页脚图像位于文本div上
我希望文字div在动画上

据我所知，在现实世界中，如果这些是物理纸张切割，那么就无法实现这一目标。是否有可行的方法在网站上以编程方式实现此目的？

编辑：我看到我挑起了与设计相关的答案。这是正确的:)我将线框图显示在这里。现在我将解释一下：

页脚图像是我城市的天空线。画布动画用于渲染飞越整个屏幕区域的鸟类。文本信息（和背景div）应该向下滚动到城市天空线后面。但我不希望飞鸟悬停在屏幕上的文字上：）

有没有办法让画布仅对另一个元素（文本）透明？

Answer 1

我想我得到了你所说的话。一种可能性是将动画分割为多个<canvas>元素，每个元素都有自己的位置和z-index，基于它们在屏幕上的位置（所以在页脚底部，你有z-索引0，然后在页面中间左右你有另一个z-index -5等画布。）绝对定位/ JavaScript辅助将是最简单的方法来确定大小并正确放置所有内容，尽管它是＆＃39 ;不是唯一的选择。

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

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

...//draw

context.restore();

这将调整你的场景，使得点（0,0）始终是所有画布的浏览器的左上角（而不是每个画布通常的左上角），所以你的所有绘图逻辑无论它在哪个画布上都会绘制正确的东西。如果性能开始出现问题，你可以添加逻辑，只尝试绘制实际可能在当前绘制的画布中显示的元素。

使用这种方法，看似单个背景图形实际上是不可见地拼接在一起的多个图形，这将使图形的不同部分具有不同的z索引。

Answer 2

您可以根据位置

更改z-index

HTML5 Canvas图层难题（z-index）

2 个答案: