使用 HTML 标记来补充 canvas（二）动画和文本渲染

简介

常用缩略词

CSS：级联样式表

DOM：文档对象模型

HTML：超文本标记语言

UI：用户界面

在这个由两部分组成的 系列文章 的 第 1 部分 中，我们讨论了如何让 canvas 与 HTML 元素强强联手， 共同构建丰富的 Internet 应用程序。

在本文中，我们将回顾选择 canvas 或以 HTML 为中心的架构 的标准，了解动画考虑事项和克服文本渲染限制的方法，也就是说，通过将 HTML 和 canvas 元素分层，为视 频游戏奠定基础，从而利用每一种方法的优势。图 1 显示了本文中太空射击游戏示例的基础。

图 1. 将 HTML 和 canvas 元素相结合的样例应用程序

您可以 下载 本文中使用的示例的源代码。

架构

在使用大量 图形组件、交互式体验和可视化效果构建应用程序时，重要的是要了解可用于该任务的工具。本节将探讨如何 使用 HTML 实现 UI 组件，以及如何使用 canvas 实现动画组件。

用户界面

尽管 canvas 可能 具有令人印象深刻的图形性能，但它并不总是实现丰富 UI 的最佳选择；HTML 元素可能更适合。很多丰富的 Internet 应用程序包含各种部件，每个部件都有不同的用途和要求。将 canvas 和 HTML 元素强强联合的混 合方法可以最有效地实现您的目标。

样例应用程序利用了 图 2 中的分层技术。canvas 主要负责实时 图形和动画，而几个 HTML 元素将会覆盖在上面，用于构成各个 UI 组件。

图 2. 将 HTML 元素放在 canvas 上面一层