2014年Android学习资料之使用 HTML 5 开发新的可视化 UI 特性.pptVIP

Android学习资料之使用HTML5开发新的可视化UI特性（1）简介先决条件常用缩略词清单1.报告HTML清单2.graph函数奇妙的CSS3世界清单3.页面上半部分的代码1AJFJDSHFDHGKHFKLGHSKHGLKDHGJHLKSHDGJLSHLGDHSLHGHTML5针对移动Web应用程序引入了大量新特性，其中包括一些可视化特性，它们通常会带来强烈的视觉冲击。Canvas是最引人注目的新UI功能，能在浏览器中提供完整的2D图形。在本文中，您将学习如何使用Canvas以及HTML5中的其他一些新视觉元素，对于移动用户来说，这些元素更微妙，但更与众不同。简介2HTML5是一项被大肆宣扬的技术，但是它实至名归。它有望成为一个技术引爆点，将桌面应用程序功能引向浏览器。它不仅适用于传统浏览器，甚至也针对移动浏览器。更好的是，最流行的移动浏览器已经采纳和实现HTML5规范的很多重要部分。在这个五部分的系列中，我们将详细了解几个新技术，它们都是HTML5的一部分，可以大大影响移动Web应用程序开发。在每一部分中，都将开发一个可以工作的移动Web应用程序，展示一个可以用于现代移动Web浏览器（比如iPhone和基于Android的设备上的浏览器）的HTML5特性。Android学习资料3在本文中，您将使用最新的Web技术开发Web应用程序。这里的大部分代码只是HTML、JavaScript和CSS—所有Web发人员的核心技术。所需的最重要的工具是用于进行测试的浏览器。本文大部分代码将在最新桌面浏览器上运行，但也有一些例外，我们将在文章中进行说明。当然，您也必须在移动浏览器上测试，为此，您需要最新的iPhone和AndroidSDKs。本文将使用iPhoneSDK3.1.3和AndroidSDK2.1。Android学习资料先决条件4多年以来，Web开发人员一直在抱怨Canvas。现在，为何还有人会抱怨浏览器中的一个原生画图API呢？毕竟，它允许您创建某种图形界面，否则您将需要某种浏览器插件（每位移动Web开发人员都知道，插件在一些最流行的移动浏览器上并不可用）。Web开发人员抱怨Canvas的原因是：尽管现在它可用于Firefox和Safari已经很多年，但最流行的桌面浏览器Microsoft®InternetExplorer®一直不支持它。甚至InternetExplorer9的早期版本也不支持Canvas。因此，多年来，Canvas一直是最大的技术笑话。您可能会发现，这些令人惊叹的Canvas样例遍布整个Internet，但您不能仅仅因为InternetExplorer不支持它就将它用于大多数Web应用程序。幸运的是，对于移动Web开发人员来说，Canvas没有这样的限制。您瞄准的所有基于Webkit的浏览器都能实现Canvas并极大地优化其性能。Android学习资料5Ajax：异步JavaScript+XMLAPI：应用程序编程接口CSS：层叠样式表DOM：文档对象模型HTML：超文本标记语言SDK：软件开发工具包UI：用户界面XML：可扩展标记语言Android学习资料常用缩略词6CanvasAPI是一个低级画图API，它支持创建直线、曲线、多边形和圆圈，并用彩色、渐变色等填充它们。在Canvas上，您可以创建文本，执行各种各样的几何转换。可以想见，这样的API的用途是无限的。我们来看一个使用Canvas来创建一个图形报告的应用程序。图1展示了该应用程序的屏幕截图：一个显示每年结果的柱状图。Android学习资料7图1.运行在Android浏览器上的基于Canvas的报告应用程序图1所显示的并不是浏览器中的一幅静态图像。这个报告图形是使用这个CanvasAPI实时生成的。清单1展示了创建这个报告的HTML。Android学习资料8!DOCTYPEhtmlhtmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=UTF-8metaname=viewportcontent=width=device-width;initial-scale=1.0;maximum-scale=1.0;user-scalable=0;/metaname=apple-touch-fullscreencontent=YES/titleHTML5Reports/titlescripttype=text/javascriptfunctioninit(){vardata=[{year:2007,sales:49},{year:2008,sales:131},{year:2009,sales:294},清单1.Android学习资料之报告HTML9{year:2010,sales:405}];v