使用 HTML 标记来补充 canvas(二)动画和文本渲染 - 面向对象网,web开发,html,学习,对象 - 面向对象技术开发

面向对象技术开发

会员投稿 投稿指南 站长资讯通告:
您的位置: 首页 > Web开发 > Html > 正文

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

来源: www.bianceng.cn 阅读:

简介

常用缩略词

CSS:级联样式表

DOM:文档对象模型

HTML:超文本标记语言

UI:用户界面

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

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

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

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

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

架构

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

用户界面

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

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

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

将 HTML 元素放在 canvas 上面一层

Tags:
相关文章列表: