共计 3399 个字符，预计需要花费 9 分钟才能阅读完成。

HTML 层

Construct 支持将 HTML 内容与您的项目集成。这包括 HTML Element 对象以及其他 HTML 元素类别中的插件，例如 Button 和 Text Input。与其他类型的对象相比，对 HTML 对象的分层处理有所不同。特别是，要使其他 Construct 对象显示在 HTML 对象之上，必须使用 HTML 层。本指南解释了 HTML 层的工作原理。

使用 HTML 层可以更好地将 HTML 内容集成到您的项目中。例如，如果您想使用 HTML 作为项目用户界面的一部分，但又想在用户界面上显示一些装饰，如粒子效果，那么就必须使用 HTML 层来使粒子效果显示在 HTML 内容之上。

Canvas vs. HTML 对象

大多数 Construct 对象（如 Sprite、Tiled Background 和 Particles）渲染到 canvas 元素中。这类对象统称为 canvas 对象。canvas 元素是一个单一的 HTML 元素，实际上充当每帧都发生变化的大幅图像。就像通常的 img（图像）元素一样，它只能完全放在其他 HTML 元素前面或后面 – 没有办法让它部分在前面，部分在后面的另一个 HTML 元素。

像 Button 和 Text Input 这样的 HTML 对象本身由其他 HTML 元素表示（分别是 button 和 input）。这类对象统称为 HTML 对象。它们不会被绘制到 canvas 中。因此，它们只能出现在 canvas 元素的前面或后面。

默认情况下，Construct 创建一个单独的 canvas 元素，所有其他 HTML 元素都放置在 canvas 之上。例如，如果一个项目使用了一个 Sprite 和一个 Button 对象，Construct 将使用以下 HTML 元素堆栈（从上到下）：

• button 用于 Button 对象（在上面）
• canvas 用于像 Sprite 这样的 canvas 对象（在下面）
  通过这种安排，即使 Sprite 对象位于 Button 对象之上的图层上，或者在同一图层上的 Z 顺序中位于顶部，Sprite 对象也不可能出现在 Button 对象之上。换句话说，HTML 分层优先于 Construct 的 Z 顺序。

HTML 层

通过使用 Construct 的 HTML 层功能，可以使 canvas 对象呈现在 HTML 对象之上。检查图层的 HTML 元素图层属性会将该图层转换为 HTML 层，并在图层栏中使用特殊标签图标表示此状态。然后，其他图层上的内容将显示在该图层上的 HTML 对象之上。

这是通过为每个 HTML 层创建额外的 canvas 元素来实现的。例如，考虑以下图层排列：

• 第 1 层，带有 Sprite 对象

• 第 0 层，带有 Button 对象
  通常，即使它在图层上位于其下方，Button 也会显示在 Sprite 对象之上，原因如上所述。但是，如果将第 0 层设为 HTML 层，现在可以让 Sprite 显示在 Button 之上。这是因为 Construct 现在创建了以下 HTML 元素（从上到下）：

• canvas 用于第 1 层，带有 Sprite 对象

• button 用于 Button 对象

• canvas 用于第 0 层，带有任何其他 canvas 对象
  请注意，同一图层上的所有 HTML 对象仍然显示在任何其他 canvas 对象之上。然而，所有图层上高于 HTML 层的 canvas 对象都可以显示在 HTML 对象之上。

如果多个 HTML 对象位于同一个 HTML 层上，则它们将在两个 canvas 元素之间按自己的相对 Z 顺序排序。实际上，Construct 使用 div 元素包装器来包含 canvas 之间的所有 HTML 内容。这也确保 HTML 内容被裁剪到 canvas 区域，因此当移动到屏幕边缘时它们会被切断，就像 canvas 对象一样。

隐式顶级 HTML 层

顶层始终隐式为 HTML 层。换句话说，如果您没有 HTML 层，那么 HTML 对象将显示在所有 canvas 对象之上，因为所有 HTML 元素默认都放置在 canvas 元素之上，如本指南中的第一个示例所示。

多个图层

非 HTML 层上的 HTML 对象将在 Z 顺序中的下一个 HTML 层之上视觉上出现。为了说明这一点，考虑以下图层排列：

• 第 7 层（普通层）
• 第 6 层（普通层）
• 第 5 层（HTML 层）
• 第 4 层（普通层）
• 第 3 层（普通层）
• 第 2 层（HTML 层）
• 第 1 层（普通层）
• 第 0 层（普通层）
  

  代码注释

这段代码涉及到两个 HTML 层，分别位于第 2 层和第 5 层。在这种情况下，所有在第 0 层、第 1 层和第 2 层的 HTML 对象将显示在第 2 层（在所有其他 canvas 对象之上）；所有在第 3 层、第 4 层和第 5 层的 HTML 对象将显示在第 5 层；所有在第 6 层和第 7 层的 HTML 对象将显示在它们之上，因为顶部有一个隐含的 HTML 层。这是因为 Construct 创建了以下 HTML 元素（从上到下的顺序）：

• 第 6 - 7 层的 HTML 元素
• 用于第 6 - 7 层 canvas 对象的 canvas
• 第 3 - 5 层的 HTML 元素
• 用于第 3 - 5 层 canvas 对象的 canvas
• 第 0 - 2 层的 HTML 元素
• 用于第 0 - 2 层 canvas 对象的 canvas

在这种情况下，第 0 - 2 层、第 3 - 5 层和第 6 - 7 层可以分别视为独立的 HTML 层。因此，这里有三层 HTML 层，因为相对于 canvas 对象，HTML 对象可以在三个不同的位置出现，而 canvas 对象有八层，因为 canvas 对象可以在八个不同的位置出现（分布在三个 canvas 元素中）。

注意，HTML 对象总是显示在同一 HTML 层的所有 canvas 对象之上。可以将 HTML 层视为一个 canvas 元素，其中所有 canvas 对象都与上面的一层 HTML 对象配对。在一个 HTML 层内，HTML 对象将遵循它们的相对 Z 顺序。例如，如果在同一个 HTML 层中，一个按钮位于文本输入框之上，那么 Construct 将确保按钮对象的 HTML 元素位于文本输入框的 HTML 元素之上。

只有顶级层可以成为 HTML 层。通过这种堆叠 canvas 元素和其他 HTML 元素的方法，无法支持将子层设为 HTML 层。

效果

在使用效果时，请注意它们只能处理同一 canvas 上的内容。这通常会影响背景混合效果。以前面的多层示例为例，如果在第五层上有背景混合效果，那么它只能与第 3 - 5 层上的内容混合。低于该层的层级位于不同的 HTML 层，因此呈现在不同的 canvas 上，因此背景混合效果无法处理它们。这是渲染组合工作方式的一个副作用：由于每个 canvas 是单独渲染的，效果无法跨它们工作。

性能开销
如前所述，对于每个作为 HTML 层的层级，都会创建一个与视口大小相同的额外 canvas 元素。这会带来性能开销。这将影响性能的两个方面：

• 每个 canvas 必须在每帧复制到显示器上。这会产生绘制视口大小表面的效果，类似于 Force own texture layer。这将消耗 GPU 填充率（有关填充率的更多详细信息，请参阅性能提示）。在某些情况下，合成过程可能需要多次复制，使其可能比 Force own texture layer 贵两到三倍。
• 每个 canvas 必须在内存中分配，至少需要与视口大小相同的内存量。例如，1920×1080 大小的 canvas 至少需要 8 MB 的内存（有关内存使用的更多详细信息，请参阅内存使用情况）。在某些情况下，合成过程可能需要多个表面，使其可能使用两到三倍的内存。
  因此，避免使用过多的 HTML 层。尽量使用实现项目所需分层所需的最少数量的 HTML 层。

定位

HTML 对象使用基于它们所在的 Construct 层的大小和位置。换句话说，它们与如果它们是 canvas 对象所具有的大小和位置相匹配。因此，如果 HTML 对象位于具有不同滚动位置、缩放或视差的不同层上，它们将与它们所在的层的位置相匹配，即使它们显示在它们上方的下一个 HTML 层上。

浏览器并不总是同时更新 canvas 元素和其他 HTML 元素。你可能会发现，如果你同时高速移动 canvas 对象和 HTML 对象，由于浏览器在不同时间绘制它们，它们之间会出现可见的差异，因为其中一个落后于另一个一帧或两帧。

动态层

可以使用 Set layer HTML 操作或 isHTMLElementsLayer 脚本属性动态添加或更改 HTML 层。这将导致 Construct 添加或删除 canvas 元素，并重新排列 HTML 元素的层次结构，以反映更改。然而，这很难同步，特别是在 worker 模式下，更改不能同步进行。这可能会导致短暂的闪烁，因为进行了 HTML 更改。可以通过提前创建足够的 HTML 层并在填充内容之前使用淡入内容等技术来避免这种情况，以便内容最初是隐形的，因此不会注意到闪烁。