htm5高级功能介绍12 html5.pptx

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

?

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

;2.本地存储与离线应用

?

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

?

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

;4.处理线程

?

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

;5.获取地理位置信息

?

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

;关注高洛峰微信公众账号

了解更多相关信息