本节将介绍一些基本的方法，可以在一个网页布局中结合使用 canvas 元素和其他 HTML 元素。下面的方法虽然不是十分相近，但是提供了几个例子演示如何最佳地利用 HTML 和 canvas 二者的优点，同时最大程度弱化它们的缺陷。在为您的应用程序规划架构时，考虑哪一种方法（或几种方法）最适合用于实现您的目标。

下面的场景假设提供两个主要组件：

canvas 元素，其中包含主要的图形和动画组件

HTML 元素，其中包含 UI 的不同部分，比如菜单、导航元素和表格等

使用 canvas 元素

<canvas> 标记被认为是一个块级别的元素，因此组合 HTML 和 canvas 元素的最简单的方法就是将 <canvas> 元素插入到文档正文中。由于该元素默认情况下将使用相对位置，因此在文档其余部分中不需要对该 canvas 元素使用特殊的标记或 CSS。

使用 Canvas 作为前景元素

<canvas> 元素可以通过 z 索引采用绝对位置放到页面上，从而能够显示在前景中。

该方法适合于不需要与页面中其他 HTML 元素交互的 canvas 应用程序，类似于嵌入了一个 Flash 应用程序。

由于 canvas 是前景中最靠上的元素，因此 canvas 元素将能够捕捉到所有形式的用户输入（鼠标单击和触摸事件等）。

图 6 演示了将 canvas 定位为一个使用绝对位置的前景元素的方法。

图 6. 在文档上方对 canvas 元素进行分层

图 6. 在文档上方对 canvas 元素进行分层

清单 6 中的代码演示了将元素放到前景层最上面位置所需的 CSS，采用了一个大的 Z 索引。

清单 6. 将 canvas 作为前景元素的 CSS

canvas { position: absolute; z-index: 100; bottom: 0px; right: 0px; }

将 Canvas 作为背景元素

<canvas> 元素也可以用于在 Web 页面的背景中显示内容。

该方法可用于生成丰富的动画背景，位于标准的 HTML 内容下方。背景 canvas 场景将可以在文档内的任何透明区域显示。

图 7. 在文档下方对 canvas 元素分层

图 7. 在文档下方对 canvas 元素分层

清单 7 中的代码显示了通过设置负 z 索引将 canvas 元素放到最底层。

清单 7. 将 canvas 放到背景中所需的 CSS

canvas { position: absolute; z-index: -1; top: 0px; left: 0px; }

在 canvas 上进行分层

另一种方法是在 canvas 元素上方对一个或多个 HTML 元素进行分层。如图 8 所示，该方法适合需要丰富 UI 组件的应用程序。对于这种情况，一组基于 HTML 的 UI 组件将会漂浮在 canvas 提供的图层上方。

图 8. 在 canvas 上方对 HTML 元素进行分层

图 8. 在 canvas 上方对 HTML 元素进行分层

每个单独的 UI 组件都可以通过使用 CSS 进行排列，从而显示在 canvas 上方前景中的特定位置。

清单 8 通过一个例子展示了如何通过设置一个高 z 索引在 <div> 元素内放置 UI 组件。

清单 8. 将 HTML 组件作为前景元素的 CSS

div.user-interface { position: absolute; z-index: 100; top: 50px; left: 50px; }

由于基于 HTML 的 UI 组件位于最上层，它们默认将响应用户输入。例如，如果某个元素包含一个 UI 元素，如复选框、滚动条或超链接，那么用户单击鼠标的操作将被这些元素捕捉到。通常，单击这些元素的其中一个不会转移到下面的 canvas 层。然而，在某些情况下，可能需要将用户输入放到 canvas 中。