12 HTML5的高级功能介绍

12 HTML5的高级功能介绍

作为一名Web开发者能掌握前面介绍过的HTML5技术，就几乎可以满足我们的需求，当然，HTML5的内容远不指这些，如果你从事一些HTML5游戏开发， 或基于移动设备的APP应用开发，你还需要了解更多HTML5的内容。 像绘制图形、本地存储、离线应用程序、通信API、处理线程、获取地理位置信息等。

1. 绘制图形

如果人见过基于HTML5的游戏，多数都是通过HTML5新增元素canvas元素实现的， 这个元素有一套编程接口(Canvas API)， 专门用来绘制图形， 可以实现非常漂亮的图形与图像， 创建出更多丰富多彩、赏心悦目的下一代Web页面。在canvas元素里进行绘画，并不是指拿鼠标来作画，canvas元素只是一个无色通明区域，是JavaScript语言的画布，需要利用JavaScript编写脚本进行绘画。

2. 本地存储与离线应用

在HTML5中除了canvas元素之外， 另一个新增的非常重要的功能是可以在客户端本地保存数据。 在HTML5中与本地存储相关的有两个重要内容，分别是Web Storange与本地数据库。基中Web Storange存储机制是对HTML4中cookies存储机制的一个改善。本地数据库是HTML5新增的功能，可能使用它在客户端本地建立一个数据库，实现原本必须保存在服务器端数据库中的内容，可以直接保存在客户端本地了， 这就大大减轻了服务器端的负担， 提高了访问数据库的速度。现在Web应用程序已经变得越来越复杂， 如果没有和Internet建立连接， 就不能使用这个Web应用程序，在HTML5中新增加的API，利用本地缓存机制很好地解决了这个问题， 让Web应用程序在离线状态时也可能正常工作。 就是把所有构成Web应用程序的资源文件， 像HTML文件、CSS文件和JavaScript脚本等放在本地缓存中，当服务器没有和Internet建立连接时， 也可以利用本地缓存中的资源文件来正常运行Web应用程序。

3. 通信API

在HTML5中提供了网页文档之间互相接收与发送信息的功能， 使用这个功能， 只要获取到网页所在窗口对象的实例， 不仅同源的Web网页之间可以互相通信， 甚至可以实现跨域通信。HTML5新增两个和通信相关的功能， 跨文档消息传输功能与使用Web Sockets API来通过socket端口传递数据的功能。使用跨文档消息传输功能， 可以在不同网页文档、不同端口、不同域之间进行消息的传递。使用Web Sockets API可以让客户端与服务器通过Socket端口来传递数据，这样做就可以实现数据推送技术，服务器不再是被动地等待客户端发出的请求，只要客户端与服务器建立了一次连接之后， 服务器端就可以在需要的时候，主动地将数据推送到客户端， 直到客户端显示关闭这个连接。

4. 处理线程

在使用HTML4与JavaScript编写的Web程序中， 因为所有的处理都是在单线程内执行的，如果花费时间比较长的话， 程序界面会处于长时间没有响应的状态，而当时间长到一定程度，浏览器还会跳出一个脚本运行时间过长的提示框， 用户就不得不中断正在执行的处理。为了解决这个问题， HTML5新增了一个Web Workers API, 用户可以很容易地创建在后台运行的线程（在HTML5中被称为worker）, 创建一个不会影响前台处理的后台程序， 并且在这个后台线程中还能创建多个子线程，你可以将耗时较长的处理交给后台线程去运行， 对用户在前台页面中执行的操作就完全没有影响了。

5. 获取地理位置信息

HTML5中提供了地理位置信息的API，通过浏览器来获取用户当前位置。如果浏览器支持， 且设备具有定位功能，就能够直接使用这组API业获取当前位置信息。在获取地理位置信息前，首先浏览器都会向用户询问是否愿意共享其位置信息，待用户同意后才能使用。基于此特性可以开发基于位置的服务应用。