第11章 HTML5开发实战

HTML5地理定位
地理定位（Geolocation）就是确定某个设备或 用户在地球上所处位置的过程。Geolocation是 HTML5中非常重要的新功能。Internet Explorer 9、Firefox、Chrome、Safari以及Opera支持地 理定位。
11.3.1

地理定位方法
地理位置（Geolocation）是 HTML5 的重要特性之一 ，提供了确定用户位置的功能，借助这个特性能够 开发基于位置信息的应用。目前，Web网站可以使用 3种方法来确定你的地理位置 。
11.2

HTML5音频Audio
HTML5规定了一种通过audio元素来包含音 频的标准方法。audio元素能够播放声音文 件或者音频流。
11.2.1 Audio元素简介

在HTML5中，audio元素与video元素非常类似，但 audio元素没有视频效果。audio元素是HTML5的一 个原生元素，它消除了使用第三方播放器的必要。 与video元素类似，可以使用CSS设置audio元素的 样式。
第11章 HTML5开发实战
教学内容：在过去的10年里，网页设计师使用 Flash、JavaScript 或其他复杂的软件和技术来创 建网站。现在可以使用HTML5实现交互式服务、单 页UI、交互式游戏、复杂业务应用。凭借对标准驱 动的移动应用开发的支持，以及各种强大特性， HTML5迎来了它的黄金时代。本章就来介绍HTML5开 发实战。
11.2.2

隐藏audio播放器
在audio标记中，如果不包含controls属性，则audio 播放器将不会呈现在页面上。在这种情况下，用户 无法使用标准控件来启动音频播放。在不呈现audio 播放器的情况下，可以启动audio元素音频播放的方 法放在页面的load事件中 。
11.2.3

使用audio元素的事件
wk.baidu.com 11.5.2

图形绘制
SVG提供了很多的基本形状，这些元素可以直接使用。
11.5.3

文本与图像
SVG的强大能力之一是它可以将文本控制到标准 HTML页面不可能有的程度，而无须求助图像或其他 插件。任何可以在形状或路径上执行的操作都可以 在文本上执行。尽管SVG的文本渲染如此强大，但是 还是有一个不足之处：SVG不能执行自动换行。如果 文本比允许空间长，则简单地将它切断。多数情况 下，创建多行文本需要多个文本元素。
•
•
• • •
教学重点 掌握HTML5 视频video 掌握HTML5 音频Audio 掌握HTML5 地理定位 掌握HTML5 画布canvas 掌握HTML5 SVG
11.1

HTNL5视频video
以前我们要在网页中嵌入视频的最常用的办法 是使用Flash，通过使用object和embed标签， 就可以通过浏览器播放SWF、FLV等格式视频 文件，但是前提是浏览器必须安装第三方插件 Adobe Flash Player。而HTML5的到来，改变了 这一事实，只需要使用video标签就可以轻松 加载视频文件，而不需要任何第三方插件。
11.6经典习题


1. 填空题
（1）HTML5使用_________标签可以控制视频的播 放与停止、循环播放、视频尺寸等。_________标签 含有______、______、______、______、______、 ______、______、______等属性。 （2）HTML5的_________元素使用JavaScript在网页 上绘制图像。画布是一个矩形区域，可以控制其每 一像素。_________拥有多种绘制路径、矩形、圆形 、字符以及添加图像的方法。
11.1.2

在网页中添加视频文件
以前网页中的大多数视频是通过插件来显示的。然 而，并非所有浏览器都拥有同样的插件。 HTML5 规 定了一种通过video元素来包含视频的标准方法。
11.1.3 链接不同的视频文件

Source元素用于给媒体指定多个可选择的文件地址， 且只能在媒体标签没有使用src属性时使用。 source 元素可以链接不同格式的视频文件。浏览器 检测并使用第一个可识别的格式。
11.4 HTML5画布Canvas

在HTML5中Canvas元素用于在网页上绘制图 形，该元素标签强大之处在于可以直接在 HTML上进行图形操作，具有极大的应用价值。
11.4.1 canvas元素

canvas元素可以说是HTML5 元素中功能最强大的一个。 HTML5的canvas元素使用 JavaScript在网页上绘制图像 。画布是一个矩形区域，可 以控制其每一像素。canvas 拥有多种绘制路径、矩形、 圆形、字符以及添加图像的 方法。
11.4.4

径向渐变
径向渐变是从一个点向外围扩散。可以使用 createRadialGradient方法创建径向渐变。用于创建线 性渐变的createLinearGradient方法仅接收4个参数，与 之不同的是，创建径向渐变的createRadialGradient方 法需要接收6个参数。最好将用于定义径向渐变的6个 参数视为两组参数，每一组包含3个参数，每一组参 数用于建立一个圆的原点和半径。只要为这两个圆设 置不同的参数，就可以创建径向渐变效果。
11.4.2

基本的绘图操作
使用CSS来设置canvas元素的大小，与直接设置属性 相比，其差别是基于这样一个事实的：canvas元素实 际上有两套尺寸。一个是元素本身的大小，还有一 个是元素绘图表面的大小。
11.4.3

线性渐变
线性渐变沿着一条直线路径，从一种颜色过渡到另 外一种颜色。一个线性渐变可以具有多种颜色设置， 每一种颜色设置在路径上具有一个不同的位置。这 种设置为如何呈现线性渐变的效果提供了多种可能 性。
11.3.2

处理拒绝和错误
获取用户的地理位置是没有保证的。可能会产生一 些错误。getCurrentPosition方法的第二个参数 showError是一个错误处理的回调函数。它规定当获 取用户位置失败时运行的函数。
11.3.3

在地图上显示你的位置
Html5中提供了地理位置信息的API，通过浏览器来获 取用户当前位置。基于此特性可以开发基于位置的 服务应用。在获取地理位置信息前，首先浏览器都 会向用户询问是否愿意共享其位置信息，待用户同 意后才能使用。watchPosition()是返回用户的当前位 置，并继续返回用户移动时的更新位置。 clearWatch()是停止watchPosition()方法。
11.5.4

笔画与填充
填充色fill属性这个属性使用设置的颜色填充图形内 部，使用很简单，直接把颜色值赋给这个属性就可 以了。
11.5.5

动画
SVG采用的是使用文本来定义图形，这种文档结构非 常适合于创建动画。要改变图形的位置、大小和颜 色，只需要调整相应的属性就可以了。事实上，SVG 有为各种事件处理而专门设计的属性，甚至很多还 是专门为动画量身定做的。
11.1.1 video概述

HTML5 中的 video 标签的出现将改变浏览器必须加载 插件的情况，进一步改善用户Web体验，让用户在轻 松愉快的情况下观看视频。 HTML5 使用 video 标签可 以控制视频的播放与停止、循环播放、视频尺寸等 。 Video 标签含有 src 、 poster 、 preload 、 autoplay 、 loop、controls、width、height等属性。
11.5.1 SVG概述


SVG允许三种类型的图形对象：矢量图形形状（例如 由直线和曲线组成的路径）、图像和文本。可以将 图形对象（包括文本）分组、样式化、转换和组合 到以前呈现的对象中。SVG 功能集包括嵌套转换、 剪切路径、alpha蒙板和模板对象。 SVG绘图是交互式和动态的。例如，可使用脚本来定 义和触发动画。这一点与Flash相比很强大。Flash是 二进制文件，动态创建和修改都比较困难。而SVG是 文本文件，动态操作是相当容易的 。
audio可以触发很多事件。其中很多是标准事件，如 鼠标单击（click）、鼠标移动（mouse move）、获 得焦点（focus）等事件。另外一些则是audio元素 所特有的事件，包括播放（play）、暂停（pause）、 音量改变（volume change）、播放完毕（ended） 等。
11.3

2. 上机操作题

使用SVG绘制如图11.26所示的形状。
11.4.5

绘制精美时钟
前面学习了HTML5绘图canvas的基本知识，本节讲 述绘制精美时钟，效果如图11.16所示。
11.5 HTML5SVG

SVG可缩放矢量图形是基于可扩展标记语言 （XML），用于描述二维矢量图形的一种图形 格式。SVG是W3C制定的一种新的二维矢量图 形格式，也是规范中的网络矢量图形标准。 SVG严格遵从XML语法，并用文本格式的描述 性语言来描述图像内容，因此是一种和图像分 辨率无关的矢量图形格式。