前端开发实例教程课件第7章html5高级应用

HTML5高级应用第七章高职高专计算机任务驱动模式教材W

e

b前端开发实例教程——

H

T

M

L

5+J

a

v

a

S

c

r

i

p

t+j

Q

u

e

r

y第7章

HTML5高级应用HTML5拖放API多媒体播放7.2Canvas绘图HTML5地理定位API7.17.37.4HTML5的发展前景7.57.1

HTML5拖放API拖放是HTML5标准中非常重要的部分，通过拖放API（ApplicationProgramming

Interface，应用程序编程接口）可以让HTML页面中的任意元素都变成可拖动的，使用拖放机制可以开发出更友好的人机交互界面。7.1.1 draggable属性

draggable属性用来定义元素是否可以拖动，该属性有两个值：true和false，默认为false，当值为true时表示元素选中之后可以进行拖动操作，否则不能拖动。【例7-1】draggable属性示例，本例文件7-1.html在浏览器中的显示效果如图7-1所示。7.1

HTML5拖放API7.1.2

拖放触发的事件和数据传递在例7-1.html中，设置元素的draggable属性为true只是定义了当前元素允许拖放，用户看不到拖放的效果，并且在拖放时也不能携带数据。因此，使用拖放时，还需要通过JavaScript脚本绑定事件监听器，并在事件监听器中设置所需携带的数据。1．拖放触发的事件在拖放过程中，可触发的事件如表7-1所示。7.1

HTML5拖放API7.1.2

拖放触发的事件和数据传递2．数据传递

dataTransfer对象用于从被拖动元素向目标元素传递数据，其中提供了许多实用的属性和方法。例如，通过dropEffect与effectAllowed属性相结合可以自定义拖放的效果，使用setData()和getData()方法可以将拖放元素的数据传递给目标元素。dataTransfer对象的属性如表7-2所示。7.1

HTML5拖放API7.1.2

拖放触发的事件和数据传递2．数据传递

dataTransfer对象的方法如表7-3所示。需要注意的是，IE浏览器并不完全支持text/plain、text/html、text/xml和text/url-list格式，可以通过text简写方式进行兼容。7.1

HTML5拖放API【例7-2】HTML5拖放示例，用户可以拖动页面中的图片放置到目标矩形中，本例文件7-2.html在浏览器中的显示效果如图7-2所示。7.2

多媒体播放7.2.1 HTML5的多媒体支持在HTML5出现之前并没有将视频和音频嵌入到页面的标准方式，多媒体内容

在大多数情况下都是通过第三方插件或集成在Web浏览器的应用程序置于页面中。通过这样的方式实现的音视频功能，需要借助第三方插件，并且实现代码复杂冗长。HTML5中提供了<video>和<audio>标签，可以直接在浏览器中播放视频和音频文件，无须事先在浏览器上安装任何插件，只要浏览器本身支持HTML5规范即可。目前各种主流浏览器如IE

9+、Firefox、Opera、Safari和Chrome等浏览器都支持使用<video>和<audio>标签来播放视频和音频。1．音频格式（1）OggVorbis（2）MP3（3）WAV2．视频格式（1）Ogg（2）H.264（MP4）（3）WebM7.2

多媒体播放在HTML5出现之前并没有将视频和音频嵌入到页面的标准方式，多媒体内容

在大多数情况下都是通过第三方插件或集成在Web浏览器的应用程序置于页面中。通过这样的方式实现的音视频功能，需要借助第三方插件，并且实现代码复杂冗长。7.2.1 HTML5的多媒体支持

HTML5中提供了<video>和<audio>标签，可以直接在浏览器中播放视频和音频文件，无须事先在浏览器上安装任何插件，只要浏览器本身支持HTML5规范即可。目前各种主流浏览器如IE

9+、Firefox、Opera、Safari和Chrome等浏览器都支持使用<video>和<audio>标签来播放视频和音频。1．音频格式（1）OggVorbis（2）MP3（3）WAV2．视频格式（1）Ogg（2）H.264（MP4）（3）WebM7.2

多媒体播放7.2.2

音频标签1．<audio>标签支持的音频格式及浏览器兼容性<audio>标签支持3种音频格式，在不同的浏览器中的兼容性见表7-4。2．<audio>标签的属性<audio>标签的属性见表7-5。7.2

多媒体播放7.2.2

音频标签为了解决浏览器对音频和视频格式的支持，使用<source>标签为音频或视频指定多个媒体源，浏览器可以选择适合自己播放的媒体源。【例7-3】使用<audio>标签播放音频，本例文件7-3.html在浏览器中的显示效果如图7-3所示。7.2

多媒体播放7.2.3视频标签对于视频来说，大多数视频也是通过插件（比如Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。HTML5规定了一种通过视频标签<video>来包含视频的标准方法。<video>标签能够播放视频文件或者视频流。1．<video>标签支持的视频格式及浏览器兼容性<video>标签支持3种视频格式，在不同的浏览器中的兼容性见表7-6。7.2

多媒体播放7.2.3

视频标签

2．<video>标签的属性<video>标签的属性见表7-7。7.2

多媒体播放7.2.3

视频标签【例7-4】使用<video>标签播放视频，本例文件7-4.html在浏览器中的显示效果如图7-4所示。7.2

多媒体播放7.2.4 HTML5多媒体APIHTML

5中提供了Video和Audio对象，用于控制视频或音频的回放及当前状态等信息，Video和Audio对象的相似度非常高，区别在于所占屏幕空间不同，但属性与方法基本相同。Video和Audio对象常用的属性如表7-8所示。7.2

多媒体播放7.2.4 HTML5多媒体APIVideo和Audio对象常用的方法如表7-9所示。7.2

多媒体播放7.2.4 HTML5多媒体API【例7-5】使用Video对象创建一个自定义视频播放器，播放器包括“开始播放”/“暂停播放”按钮、播放进度信息和“静音”/“取消静音”按钮，本例文件7-5.html在浏览器中的显示效果如图7-5所示。7.3

Canvas绘图HTML5的<canvas>元素有一个基于JavaScript的绘图API，在页面上放置一个<canvas>元素就相当于在页面上放置了一块“画布”，可以在其中进行图形的描绘。7.3.1创建<canvas>元素<canvas>元素的主要属性是画布宽度属性width和高度属性height，单位是像素。向页面中添加<canvas>元素的语法格式为：<canvas

id="画布标识"width="画布宽度"height="画布高度">…</canvas>7.3

Canvas绘图7.3.2

构建绘图环境大多数<canvas>绘图API都没有定义在<canvas>元素本身上，而是定义在通过画布的getContext()方法获得的一个“绘图环境”对象上。getContext()方法返回一个用于在画布上绘图的环境，其语法如下：canvas.getContext(contextID)参数contextID指定了用户想要在画布上绘制的类型。“2d”，即二维绘图，这个方法返回一个上下文对象CanvasRenderingContext2D，该对象导出一个二

维绘图API。7.3

Canvas绘图7.3.3 通过JavaScript绘制图形<canvas>元素只是图形容器，其本身是没有绘图能力的，所有的绘制工作必须在JavaScript内部完成。在画布上绘图的核心是上下文对象CanvasRenderingContext2D，用户可以在JavaScript代码中使用getContext（）方法渲染上下文进而在画布上显示形状和文本。JavaScript使用getElementById方法通过canvas的id定位canvas元素，例如以下代码：varmyCanvas=document.getElementById('myCanvas');然后，创建context对象，例如以下代码：varmyContext

=myCanvas.getContext("2d");getContext（）方法使用一个上下文作为其参数，一旦渲染上下文可用，程序就可以调用各种绘图方法。7.3

Canvas绘图7.3.3 通过JavaScript绘制图形

1．绘制矩形（1）绘制填充的矩形

fillRect()方法用来绘制填充的矩形，语法格式为：

fillRect(x,y,weight,height)其中的参数含义如下：x,y：矩形左上角的坐标。weight,height：矩形的宽度和高度。（2）绘制矩形轮廓

strokeRect()方法用来绘制矩形的轮廓，语法格式为：

strokeRect(x,y,weight,height)其中的参数含义如下：x,y：矩形左上角的坐标。weight,height：矩形的宽度和高度。7.3

Canvas绘图7.3.3 通过JavaScript绘制图形

1．绘制矩形【例7-6】绘制填充的矩形和矩形轮廓，本例文件7-6.html在浏览器中的显示效果如图7-6所示。7.3

Canvas绘图7.3.3 通过JavaScript绘制图形

2．绘制路径（1）lineTo()方法

lineTo()方法用来绘制一条直线，语法格式为：

lineTo(x,y)其中的参数含义如下：

x,y：直线终点的坐标。（2）moveTo()方法在绘制直线时，通常配合moveTo()方法设置绘制直线的当前位置并开始一条新的子路径，其语法格式为：moveTo(x,y)其中的参数含义如下：x,y：新的当前点的坐标。7.3

Canvas绘图7.3.3 通过JavaScript绘制图形

2．绘制路径【例7-7】绘制直线，本例文件7-7.html在浏览器中的显示效果如图7-7所示。7.3

Canvas绘图7.3.3 通过JavaScript绘制图形

2．绘制路径当用户需要绘制一个路径封闭的图形时，需要使用beginPath()方法初始化绘制路径和closePath()方法标记路径绘制操作结束。beginPath()方法的语法格式为：beginPath()

closePath()方法的语法格式为：closePath()【例7-8】绘制一个三角形，本例文件7-8.html在浏览器中的显示效果如图

7-8所示。7.3

Canvas绘图7.3.3 通过JavaScript绘制图形

3．绘制圆弧或圆arc()方法使用一个中心点和半径，为一个画布的当前子路径添加一条弧，语法格式为：arc(x,

y,

radius,

startAngle,

endAngle,

counterclockwise)【例7-9】绘制圆弧和圆，本例文件7-9.html在浏览器中的显示效果如图7-9所示。7.3

Canvas绘图7.3.3 通过JavaScript绘制图形

4．绘制文字（1）绘制填充文字

fillText()方法用于填充方式绘制字符串，语法格式为：

fillText(text,x,y,[maxWidth])（2）绘制轮廓文字

strokeText()方法用于轮廓方式绘制字符串，语法格式为：

strokeText(text,x,y,[maxWidth])【例7-10】绘制填充文字和轮廓文字，本例文件7-10.html在浏览器中的显示效果如图7-10所示。7.3

Canvas绘图7.3.3 通过JavaScript绘制图形

5．绘制渐变（1）绘制线性渐变

createLinearGradient()方法用于创建一条线性颜色渐变，语法格式为：

createLinearGradient(xStart,yStart,xEnd,yEnd)（2）绘制径向渐变

createRadialGradient()方法用于创建一条放射颜色渐变，语法格式为：

createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)说明：该方法创建并返回了一个新的CanvasGradient对象，该对象在两个指定圆的圆周之间放射性地插值颜色。这个方法并没有为渐变指定任何颜色，用户可以使用返回对象的addColorStop()方法来实现这个功能。要使用一个渐变来勾勒线条或填充区域，只需要把CanvasGradient对象赋给strokeStyle属性或fillStyle属性即可。addColorStop()方法在渐变中的某一点添加一个颜色变化，语法格式为：

addColorStop(offset,color)7.3

Canvas绘图7.3.3 通过JavaScript绘制图形

5．绘制渐变【例7-11】绘制线性渐变和径向渐变，本例文件7-11.html在浏览器中的显示效果如图7-11所示。7.3

Canvas绘图7.3.3 通过JavaScript绘制图形

6．绘制图像canvas相当有趣的一项功能就是可以引入图像，它可以用于图片合成或者制作背景等。只要是Gecko排版引擎支持的图像（如PNG、GIF、JPEG等）都可以引入到canvas中，并且其它的canvas元素也可以作为图像的来源。用户可以使用drawImage()方法在一个画布上绘制图像，也可以将源图像的任意矩形区域缩放或绘制到画布上，语法格式为：格式一：drawImage(image,x,y)格式二：drawImage(image,x,y,width,height)格式三：drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth,destHeight)7.3

Canvas绘图7.3.3 通过JavaScript绘制图形

6．绘制图像【例7-12】绘制图像。页面中依次绘制了5幅图像，分别实现了原图绘制、图像缩小、图像裁剪、裁剪区域的放大和裁剪区域的缩小效果，本例文件7-12.html在浏览器中的显示效果如图7-12所示。7.4

HTML5地理定位API7.4.1 Geolocation基础

1．浏览器支持IE

9、Firefox、Chrome、Safari以及Opera浏览器都支持地理定位，可以使用JavaScript来验证浏览器是否支持地理定位API。代码如下：if(navigator.geolocation){//支持地理定位API时执行的代码//navigator.geolocation调用浏览器的地理位置接口}else{//不支持地理定位API时执行的代码}2．地理定位的实现方法目前，网站可以使用3种方法来确定浏览者的地理位置。（1）通过IP地址定位（2）全球定位系统GPS（3）蜂窝电话基站的位置定位7.4

HTML5地理定位API7.4.2 GeolocationAPI实现地理定位无论采用上述哪种定位技术，HTML5都可以采用它进行定位。

1．HTML5中地理位置定位的方法GeolocationAPI存在于navigator对象中，只包含3个方法：getCurrentPosition()watchPosition()clearWatch()//当前位置//监视位置//清除监视（1）getCurrentPosition()方法要获取地理位置，GeolocationAPI提供了两种模式：单次获得和重复获得地理位置。单次获得地理位置使用getCurrentPosition()方法，语法格式如下：getCurrentPosition(success,error,option)该方法最多可以有三个参数：success：成功获取位置信息的回调函数，它是方法唯一必须的参数；error：用于捕获获取位置信息出错的情况；

option：第三个参数是配置项，该对象影响了获取位置时的一些细节。7.4

HTML5地理定位API7.4.2 GeolocationAPI实现地理定位如果获得地理位置成功，则getCurrentPosition()方法返回位置对象，包含以下属性，如表7-11所示。7.4

HTML5地理定位API7.4.2 GeolocationAPI实现地理定位（2）watchPosition()方法

watchPosition()方法的参数与getCurrentPosition()方法的参数相同，用于返回用户的当前位置，并继续返回用户移动时的更新位置。

watchPosition()方法和getCurrentPosition()方法的主要区别是它会持续告诉用户位置的改变，所以基本上它一直在更新用户的位置。当用户在移动的时候，这个功能会非常有利于追踪用户的位置。（3）clearWatch()方法

clearWatch()方法用于停止watchPosition()方法。7.4

HTML5地理定位API7.4.2GeolocationAPI实现地理定位

2．在地图上显示浏览者的位置HTML5提供了地理位置信息的API，通过浏览器来获取用户当前位置。基于此特性可以开发基于位置的定位服务。在获取地理位置信息时，首先浏览器都会向用户询问是否愿意共享其位置信息，待用户同意后才能使用。【例7-13】测试用户的位置。单击页面中的“试一下”按钮，弹出对话框询问用户是否共享位置信息；用户同意后，页面中显示出用户所在的经度与纬度，本例文件7-13.html在浏览器中的显示效果如图7-13和图7-14所示。7.4

HTML5地理定位API7.4.2GeolocationAPI实现地理定位

2．在地图上显示浏览者的位置【例7-14】HTML5获取地理位置