HTML5移动应用开辟第5章:新的可视化UI 特点

发布时间:2017-04-14 19:20 来源:互联网 以后栏目:网页设计教程

先决条件

在本文中,您将应用最新的 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、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、
  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、