HTML5移动应用开发第5章：新的可视化UI 特性

先决条件

在本文中，您将使用最新的 Web 技术开发 Web 应用程序。这里的大部分代码只是 HTML、javaScript 和 CSS — 所有 Web 发人员的核心技术。所需的最重要的工具是用于进行测试的浏览器。本文大部分代码将在最新桌面浏览器上运行，但也有一些例外，我们将在文章中进行说明。当然，您也必须在移动浏览器上测试，为此，您需要最新的 iPhone 和 Android SDKs。本文将使用 iPhone SDK 3.1.3 和 Android SDK 2.1。参见参考资料获取链接。

通过 Canvas 实现图形效果

多年以来，Web 开发人员一直在抱怨 Canvas。现在，为何还有人会抱怨浏览器中的一个原生画图 API 呢？毕竟，它允许您创建某种图形界面，否则您将需要某种浏览器插件（每位移动 Web 开发人员都知道，插件在一些最流行的移动浏览器上并不可用）。Web 开发人员抱怨 Canvas 的原因是：尽管现在它可用于 Firefox 和 Safari 已经很多年，但最流行的桌面浏览器 Microsoft®Internet Explorer® 一直不支持它。甚至 Internet Explorer 9 的早期版本也不支持 Canvas。因此，多年来，Canvas 一直是最大的技术笑话。您可能会发现，这些令人惊叹的 Canvas 样例遍布整个 Internet，但您不能仅仅因为 Internet Explorer 不支持它就将它用于大多数 Web 应用程序。幸运的是，对于移动 Web 开发人员来说，Canvas 没有这样的限制。您瞄准的所有基于 Webkit 的浏览器都能实现 Canvas 并极大地优化其性能。

Canvas API 是一个低级画图 API，它支持创建直线、曲线、多边形和圆圈，并用彩色、渐变色等填充它们。在 Canvas 上，您可以创建文本，执行各种各样的几何转换。可以想见，这样的 API 的用途是无限的。我们来看一个使用 Canvas 来创建一个图形报告的应用程序。图 1展示了该应用程序的屏幕截图：一个显示每年结果的柱状图。

图 1. 运行在 Android 浏览器上的基于 Canvas 的报告应用程序

图 1所显示的并不是浏览器中的一幅静态图像。这个报告图形是使用这个 Canvas API 实时生成的。清单 1展示了创建这个报告的 HTML。

清单 1. 报告 HTML