第11章HTML5开发实战

1、在过去的10年里，网页设计师使用 Flash、JavaScript 或其他复杂的软件和技术来创建网站。现在可以使用HTML5实现交互式服务、单页UI、交互式游戏、复杂业务应用。凭借对标准驱动的移动应用开发的支持，以及各种强大特性，HTML5迎来了它的黄金时代。本章就来介绍HTML5开发实战。掌握HTML5 视频video掌握HTML5 音频Audio掌握HTML5 地理定位 掌握HTML5 画布canvas 掌握HTML5 SVG 以前我们要在网页中嵌入视频的最常用的办法是使用Flash，通过使用object和embed标签，就可以通过浏览器播放SWF、FLV等格式视频文件，但是前提是浏览器必

2、须安装第三方插件Adobe Flash Player。而HTML5的到来，改变了这一事实，只需要使用video标签就可以轻松加载视频文件，而不需要任何第三方插件。HTML5中的video标签的出现将改变浏览器必须加载插件的情况，进一步改善用户Web体验，让用户在轻松愉快的情况下观看视频。HTML5使用video标签可以控制视频的播放与停止、循环播放、视频尺寸等。Video标签含有src、poster、preload、autoplay、loop、controls、width、height等属性。11.1.1 video11.1.1 video概述概述以前网页中的大多数视频是通过插件来显示的。然而

3、，并非所有浏览器都拥有同样的插件。HTML5规定了一种通过video元素来包含视频的标准方法。11.1.2 11.1.2 在网页中添加视频文件在网页中添加视频文件Source元素用于给媒体指定多个可选择的文件地址，且只能在媒体标签没有使用src属性时使用。source 元素可以链接不同格式的视频文件。浏览器检测并使用第一个可识别的格式。11.1.3 11.1.3 链接不同的视频文件链接不同的视频文件HTML5规定了一种通过audio元素来包含音频的标准方法。audio元素能够播放声音文件或者音频流。11.2.1 Audio11.2.1 Audio元素简介元素简介在HTML5中，audio元素与

4、video元素非常类似，但audio元素没有视频效果。audio元素是HTML5的一个原生元素，它消除了使用第三方播放器的必要。与video元素类似，可以使用CSS设置audio元素的样式。在audio标记中，如果不包含controls属性，则audio播放器将不会呈现在页面上。在这种情况下，用户无法使用标准控件来启动音频播放。在不呈现audio播放器的情况下，可以启动audio元素音频播放的方法放在页面的load事件中 。11.2.2 11.2.2 隐藏隐藏audioaudio播放器播放器11.2.3 11.2.3 使用使用audioaudio元素的事件元素的事件audio可以触发很多事件。

5、其中很多是标准事件，如鼠标单击（click）、鼠标移动（mouse move）、获得焦点（focus）等事件。另外一些则是audio元素所特有的事件，包括播放（play）、暂停（pause）、音量改变（volume change）、播放完毕（ended）等。 地理定位（Geolocation）就是确定某个设备或用户在地球上所处位置的过程。Geolocation是HTML5中非常重要的新功能。Internet Explorer 9、Firefox、Chrome、Safari以及Opera支持地理定位。11.3.1 11.3.1 地理定位方法地理定位方法地理位置（Geolocation）是 HTM

6、L5 的重要特性之一，提供了确定用户位置的功能，借助这个特性能够开发基于位置信息的应用。目前，Web网站可以使用3种方法来确定你的地理位置 。11.3.2 11.3.2 处理拒绝和错误处理拒绝和错误获取用户的地理位置是没有保证的。可能会产生一些错误。getCurrentPosition方法的第二个参数showError是一个错误处理的回调函数。它规定当获取用户位置失败时运行的函数。11.3.3 11.3.3 在地图上显示你的位置在地图上显示你的位置Html5中提供了地理位置信息的API，通过浏览器来获取用户当前位置。基于此特性可以开发基于位置的服务应用。在获取地理位置信息前，首先浏览器都会向用

7、户询问是否愿意共享其位置信息，待用户同意后才能使用。watchPosition()是返回用户的当前位置，并继续返回用户移动时的更新位置。clearWatch()是停止watchPosition()方法。在HTML5中Canvas元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在HTML上进行图形操作，具有极大的应用价值。11.4 HTML5画布Canvas11.4.1 canvas11.4.1 canvas元素元素canvas元素可以说是HTML5元素中功能最强大的一个。HTML5的canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域，可以控制其每一像素。can

8、vas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。11.4.2 11.4.2 基本的绘图操作基本的绘图操作使用CSS来设置canvas元素的大小，与直接设置属性相比，其差别是基于这样一个事实的：canvas元素实际上有两套尺寸。一个是元素本身的大小，还有一个是元素绘图表面的大小。11.4.3 11.4.3 线性渐变线性渐变线性渐变沿着一条直线路径，从一种颜色过渡到另外一种颜色。一个线性渐变可以具有多种颜色设置，每一种颜色设置在路径上具有一个不同的位置。这种设置为如何呈现线性渐变的效果提供了多种可能性 。11.4.4 11.4.4 径向渐变径向渐变径向渐变是从一个点向外围扩散。可以使用

9、createRadialGradient方法创建径向渐变。用于创建线性渐变的createLinearGradient方法仅接收4个参数，与之不同的是，创建径向渐变的createRadialGradient方法需要接收6个参数。最好将用于定义径向渐变的6个参数视为两组参数，每一组包含3个参数，每一组参数用于建立一个圆的原点和半径。只要为这两个圆设置不同的参数，就可以创建径向渐变效果。11.4.5 11.4.5 绘制精美时钟绘制精美时钟前面学习了HTML5绘图canvas的基本知识，本节讲述绘制精美时钟，效果如图11.16所示。SVG可缩放矢量图形是基于可扩展标记语言（XML），用于描述二维矢量图

10、形的一种图形格式。SVG是W3C制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。11.5 HTML5SVG11.5.1 SVG11.5.1 SVG概述概述SVG允许三种类型的图形对象：矢量图形形状（例如由直线和曲线组成的路径）、图像和文本。可以将图形对象（包括文本）分组、样式化、转换和组合到以前呈现的对象中。SVG 功能集包括嵌套转换、剪切路径、alpha蒙板和模板对象。SVG绘图是交互式和动态的。例如，可使用脚本来定义和触发动画。这一点与Flash相比很强大。Flash是

11、二进制文件，动态创建和修改都比较困难。而SVG是文本文件，动态操作是相当容易的 。11.5.2 11.5.2 图形绘制图形绘制SVG提供了很多的基本形状，这些元素可以直接使用。11.5.3 11.5.3 文本与图像文本与图像SVG的强大能力之一是它可以将文本控制到标准HTML页面不可能有的程度，而无须求助图像或其他插件。任何可以在形状或路径上执行的操作都可以在文本上执行。尽管SVG的文本渲染如此强大，但是还是有一个不足之处：SVG不能执行自动换行。如果文本比允许空间长，则简单地将它切断。多数情况下，创建多行文本需要多个文本元素。11.5.4 11.5.4 笔画与填充笔画与填充填充色fill属性

12、这个属性使用设置的颜色填充图形内部，使用很简单，直接把颜色值赋给这个属性就可以了。11.5.5 11.5.5 动画动画SVG采用的是使用文本来定义图形，这种文档结构非常适合于创建动画。要改变图形的位置、大小和颜色，只需要调整相应的属性就可以了。事实上，SVG有为各种事件处理而专门设计的属性，甚至很多还是专门为动画量身定做的。11.6经典习题1. 1. 填空题填空题（1）HTML5使用_标签可以控制视频的播放与停止、循环播放、视频尺寸等。_标签含有_、_、_、_、_、_、_、_等属性。（2）HTML5的_元素使用JavaScript在网页上绘制图像。画布是一个矩形区域，可以控制其每一像素。_拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 2. 2. 上机操作题