简介
常用缩略词
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 上面一层
来源: http://www.bianceng.cn/web/Html/201311/38443.htm