前端開(kāi)發(fā)實(shí)例教程課件第7章html5高級(jí)應(yīng)用

HTML5高級(jí)應(yīng)用第七章高職高專計(jì)算機(jī)任務(wù)驅(qū)動(dòng)模式教材W

e

b前端開(kāi)發(fā)實(shí)例教程——

H

T

M

L

5+J

a

v

a

S

c

r

i

p

t+j

Q

u

e

r

y第7章

HTML5高級(jí)應(yīng)用HTML5拖放API多媒體播放7.2Canvas繪圖HTML5地理定位API7.17.37.4HTML5的發(fā)展前景7.57.1

HTML5拖放API拖放是HTML5標(biāo)準(zhǔn)中非常重要的部分，通過(guò)拖放API（ApplicationProgramming

Interface，應(yīng)用程序編程接口）可以讓HTML頁(yè)面中的任意元素都變成可拖動(dòng)的，使用拖放機(jī)制可以開(kāi)發(fā)出更友好的人機(jī)交互界面。7.1.1 draggable屬性

draggable屬性用來(lái)定義元素是否可以拖動(dòng)，該屬性有兩個(gè)值：true和false，默認(rèn)為false，當(dāng)值為true時(shí)表示元素選中之后可以進(jìn)行拖動(dòng)操作，否則不能拖動(dòng)。【例7-1】draggable屬性示例，本例文件7-1.html在瀏覽器中的顯示效果如圖7-1所示。7.1

HTML5拖放API7.1.2

拖放觸發(fā)的事件和數(shù)據(jù)傳遞在例7-1.html中，設(shè)置元素的draggable屬性為true只是定義了當(dāng)前元素允許拖放，用戶看不到拖放的效果，并且在拖放時(shí)也不能攜帶數(shù)據(jù)。因此，使用拖放時(shí)，還需要通過(guò)JavaScript腳本綁定事件監(jiān)聽(tīng)器，并在事件監(jiān)聽(tīng)器中設(shè)置所需攜帶的數(shù)據(jù)。1．拖放觸發(fā)的事件在拖放過(guò)程中，可觸發(fā)的事件如表7-1所示。7.1

HTML5拖放API7.1.2

拖放觸發(fā)的事件和數(shù)據(jù)傳遞2．?dāng)?shù)據(jù)傳遞

dataTransfer對(duì)象用于從被拖動(dòng)元素向目標(biāo)元素傳遞數(shù)據(jù)，其中提供了許多實(shí)用的屬性和方法。例如，通過(guò)dropEffect與effectAllowed屬性相結(jié)合可以自定義拖放的效果，使用setData()和getData()方法可以將拖放元素的數(shù)據(jù)傳遞給目標(biāo)元素。dataTransfer對(duì)象的屬性如表7-2所示。7.1

HTML5拖放API7.1.2

拖放觸發(fā)的事件和數(shù)據(jù)傳遞2．?dāng)?shù)據(jù)傳遞

dataTransfer對(duì)象的方法如表7-3所示。需要注意的是，IE瀏覽器并不完全支持text/plain、text/html、text/xml和text/url-list格式，可以通過(guò)text簡(jiǎn)寫(xiě)方式進(jìn)行兼容。7.1

HTML5拖放API【例7-2】HTML5拖放示例，用戶可以拖動(dòng)頁(yè)面中的圖片放置到目標(biāo)矩形中，本例文件7-2.html在瀏覽器中的顯示效果如圖7-2所示。7.2

多媒體播放7.2.1 HTML5的多媒體支持在HTML5出現(xiàn)之前并沒(méi)有將視頻和音頻嵌入到頁(yè)面的標(biāo)準(zhǔn)方式，多媒體內(nèi)容

在大多數(shù)情況下都是通過(guò)第三方插件或集成在Web瀏覽器的應(yīng)用程序置于頁(yè)面中。通過(guò)這樣的方式實(shí)現(xiàn)的音視頻功能，需要借助第三方插件，并且實(shí)現(xiàn)代碼復(fù)雜冗長(zhǎng)。HTML5中提供了<video>和<audio>標(biāo)簽，可以直接在瀏覽器中播放視頻和音頻文件，無(wú)須事先在瀏覽器上安裝任何插件，只要瀏覽器本身支持HTML5規(guī)范即可。目前各種主流瀏覽器如IE

9+、Firefox、Opera、Safari和Chrome等瀏覽器都支持使用<video>和<audio>標(biāo)簽來(lái)播放視頻和音頻。1．音頻格式（1）OggVorbis（2）MP3（3）WAV2．視頻格式（1）Ogg（2）H.264（MP4）（3）WebM7.2

多媒體播放在HTML5出現(xiàn)之前并沒(méi)有將視頻和音頻嵌入到頁(yè)面的標(biāo)準(zhǔn)方式，多媒體內(nèi)容

在大多數(shù)情況下都是通過(guò)第三方插件或集成在Web瀏覽器的應(yīng)用程序置于頁(yè)面中。通過(guò)這樣的方式實(shí)現(xiàn)的音視頻功能，需要借助第三方插件，并且實(shí)現(xiàn)代碼復(fù)雜冗長(zhǎng)。7.2.1 HTML5的多媒體支持

HTML5中提供了<video>和<audio>標(biāo)簽，可以直接在瀏覽器中播放視頻和音頻文件，無(wú)須事先在瀏覽器上安裝任何插件，只要瀏覽器本身支持HTML5規(guī)范即可。目前各種主流瀏覽器如IE

9+、Firefox、Opera、Safari和Chrome等瀏覽器都支持使用<video>和<audio>標(biāo)簽來(lái)播放視頻和音頻。1．音頻格式（1）OggVorbis（2）MP3（3）WAV2．視頻格式（1）Ogg（2）H.264（MP4）（3）WebM7.2

多媒體播放7.2.2

音頻標(biāo)簽1．<audio>標(biāo)簽支持的音頻格式及瀏覽器兼容性<audio>標(biāo)簽支持3種音頻格式，在不同的瀏覽器中的兼容性見(jiàn)表7-4。2．<audio>標(biāo)簽的屬性<audio>標(biāo)簽的屬性見(jiàn)表7-5。7.2

多媒體播放7.2.2

音頻標(biāo)簽為了解決瀏覽器對(duì)音頻和視頻格式的支持，使用<source>標(biāo)簽為音頻或視頻指定多個(gè)媒體源，瀏覽器可以選擇適合自己播放的媒體源。【例7-3】使用<audio>標(biāo)簽播放音頻，本例文件7-3.html在瀏覽器中的顯示效果如圖7-3所示。7.2

多媒體播放7.2.3視頻標(biāo)簽對(duì)于視頻來(lái)說(shuō)，大多數(shù)視頻也是通過(guò)插件（比如Flash）來(lái)顯示的。然而，并非所有瀏覽器都擁有同樣的插件。HTML5規(guī)定了一種通過(guò)視頻標(biāo)簽<video>來(lái)包含視頻的標(biāo)準(zhǔn)方法。<video>標(biāo)簽?zāi)軌虿シ乓曨l文件或者視頻流。1．<video>標(biāo)簽支持的視頻格式及瀏覽器兼容性<video>標(biāo)簽支持3種視頻格式，在不同的瀏覽器中的兼容性見(jiàn)表7-6。7.2

多媒體播放7.2.3

視頻標(biāo)簽

2．<video>標(biāo)簽的屬性<video>標(biāo)簽的屬性見(jiàn)表7-7。7.2

多媒體播放7.2.3

視頻標(biāo)簽【例7-4】使用<video>標(biāo)簽播放視頻，本例文件7-4.html在瀏覽器中的顯示效果如圖7-4所示。7.2

多媒體播放7.2.4 HTML5多媒體APIHTML

5中提供了Video和Audio對(duì)象，用于控制視頻或音頻的回放及當(dāng)前狀態(tài)等信息，Video和Audio對(duì)象的相似度非常高，區(qū)別在于所占屏幕空間不同，但屬性與方法基本相同。Video和Audio對(duì)象常用的屬性如表7-8所示。7.2

多媒體播放7.2.4 HTML5多媒體APIVideo和Audio對(duì)象常用的方法如表7-9所示。7.2

多媒體播放7.2.4 HTML5多媒體API【例7-5】使用Video對(duì)象創(chuàng)建一個(gè)自定義視頻播放器，播放器包括“開(kāi)始播放”/“暫停播放”按鈕、播放進(jìn)度信息和“靜音”/“取消靜音”按鈕，本例文件7-5.html在瀏覽器中的顯示效果如圖7-5所示。7.3

Canvas繪圖HTML5的<canvas>元素有一個(gè)基于JavaScript的繪圖API，在頁(yè)面上放置一個(gè)<canvas>元素就相當(dāng)于在頁(yè)面上放置了一塊“畫(huà)布”，可以在其中進(jìn)行圖形的描繪。7.3.1創(chuàng)建<canvas>元素<canvas>元素的主要屬性是畫(huà)布寬度屬性width和高度屬性height，單位是像素。向頁(yè)面中添加<canvas>元素的語(yǔ)法格式為：<canvas

id="畫(huà)布標(biāo)識(shí)"width="畫(huà)布寬度"height="畫(huà)布高度">…</canvas>7.3

Canvas繪圖7.3.2

構(gòu)建繪圖環(huán)境大多數(shù)<canvas>繪圖API都沒(méi)有定義在<canvas>元素本身上，而是定義在通過(guò)畫(huà)布的getContext()方法獲得的一個(gè)“繪圖環(huán)境”對(duì)象上。getContext()方法返回一個(gè)用于在畫(huà)布上繪圖的環(huán)境，其語(yǔ)法如下：canvas.getContext(contextID)參數(shù)contextID指定了用戶想要在畫(huà)布上繪制的類(lèi)型。“2d”，即二維繪圖，這個(gè)方法返回一個(gè)上下文對(duì)象CanvasRenderingContext2D，該對(duì)象導(dǎo)出一個(gè)二

維繪圖API。7.3

Canvas繪圖7.3.3 通過(guò)JavaScript繪制圖形<canvas>元素只是圖形容器，其本身是沒(méi)有繪圖能力的，所有的繪制工作必須在JavaScript內(nèi)部完成。在畫(huà)布上繪圖的核心是上下文對(duì)象CanvasRenderingContext2D，用戶可以在JavaScript代碼中使用getContext（）方法渲染上下文進(jìn)而在畫(huà)布上顯示形狀和文本。JavaScript使用getElementById方法通過(guò)canvas的id定位canvas元素，例如以下代碼：varmyCanvas=document.getElementById('myCanvas');然后，創(chuàng)建context對(duì)象，例如以下代碼：varmyContext

=myCanvas.getContext("2d");getContext（）方法使用一個(gè)上下文作為其參數(shù)，一旦渲染上下文可用，程序就可以調(diào)用各種繪圖方法。7.3

Canvas繪圖7.3.3 通過(guò)JavaScript繪制圖形

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

fillRect()方法用來(lái)繪制填充的矩形，語(yǔ)法格式為：

fillRect(x,y,weight,height)其中的參數(shù)含義如下：x,y：矩形左上角的坐標(biāo)。weight,height：矩形的寬度和高度。（2）繪制矩形輪廓

strokeRect()方法用來(lái)繪制矩形的輪廓，語(yǔ)法格式為：

strokeRect(x,y,weight,height)其中的參數(shù)含義如下：x,y：矩形左上角的坐標(biāo)。weight,height：矩形的寬度和高度。7.3

Canvas繪圖7.3.3 通過(guò)JavaScript繪制圖形

1．繪制矩形【例7-6】繪制填充的矩形和矩形輪廓，本例文件7-6.html在瀏覽器中的顯示效果如圖7-6所示。7.3

Canvas繪圖7.3.3 通過(guò)JavaScript繪制圖形

2．繪制路徑（1）lineTo()方法

lineTo()方法用來(lái)繪制一條直線，語(yǔ)法格式為：

lineTo(x,y)其中的參數(shù)含義如下：

x,y：直線終點(diǎn)的坐標(biāo)。（2）moveTo()方法在繪制直線時(shí)，通常配合moveTo()方法設(shè)置繪制直線的當(dāng)前位置并開(kāi)始一條新的子路徑，其語(yǔ)法格式為：moveTo(x,y)其中的參數(shù)含義如下：x,y：新的當(dāng)前點(diǎn)的坐標(biāo)。7.3

Canvas繪圖7.3.3 通過(guò)JavaScript繪制圖形

2．繪制路徑【例7-7】繪制直線，本例文件7-7.html在瀏覽器中的顯示效果如圖7-7所示。7.3

Canvas繪圖7.3.3 通過(guò)JavaScript繪制圖形

2．繪制路徑當(dāng)用戶需要繪制一個(gè)路徑封閉的圖形時(shí)，需要使用beginPath()方法初始化繪制路徑和closePath()方法標(biāo)記路徑繪制操作結(jié)束。beginPath()方法的語(yǔ)法格式為：beginPath()

closePath()方法的語(yǔ)法格式為：closePath()【例7-8】繪制一個(gè)三角形，本例文件7-8.html在瀏覽器中的顯示效果如圖

7-8所示。7.3

Canvas繪圖7.3.3 通過(guò)JavaScript繪制圖形

3．繪制圓弧或圓arc()方法使用一個(gè)中心點(diǎn)和半徑，為一個(gè)畫(huà)布的當(dāng)前子路徑添加一條弧，語(yǔ)法格式為：arc(x,

y,

radius,

startAngle,

endAngle,

counterclockwise)【例7-9】繪制圓弧和圓，本例文件7-9.html在瀏覽器中的顯示效果如圖7-9所示。7.3

Canvas繪圖7.3.3 通過(guò)JavaScript繪制圖形

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

fillText()方法用于填充方式繪制字符串，語(yǔ)法格式為：

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

strokeText()方法用于輪廓方式繪制字符串，語(yǔ)法格式為：

strokeText(text,x,y,[maxWidth])【例7-10】繪制填充文字和輪廓文字，本例文件7-10.html在瀏覽器中的顯示效果如圖7-10所示。7.3

Canvas繪圖7.3.3 通過(guò)JavaScript繪制圖形

5．繪制漸變（1）繪制線性漸變

createLinearGradient()方法用于創(chuàng)建一條線性顏色漸變，語(yǔ)法格式為：

createLinearGradient(xStart,yStart,xEnd,yEnd)（2）繪制徑向漸變

createRadialGradient()方法用于創(chuàng)建一條放射顏色漸變，語(yǔ)法格式為：

createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)說(shuō)明：該方法創(chuàng)建并返回了一個(gè)新的CanvasGradient對(duì)象，該對(duì)象在兩個(gè)指定圓的圓周之間放射性地插值顏色。這個(gè)方法并沒(méi)有為漸變指定任何顏色，用戶可以使用返回對(duì)象的addColorStop()方法來(lái)實(shí)現(xiàn)這個(gè)功能。要使用一個(gè)漸變來(lái)勾勒線條或填充區(qū)域，只需要把CanvasGradient對(duì)象賦給strokeStyle屬性或fillStyle屬性即可。addColorStop()方法在漸變中的某一點(diǎn)添加一個(gè)顏色變化，語(yǔ)法格式為：

addColorStop(offset,color)7.3

Canvas繪圖7.3.3 通過(guò)JavaScript繪制圖形

5．繪制漸變【例7-11】繪制線性漸變和徑向漸變，本例文件7-11.html在瀏覽器中的顯示效果如圖7-11所示。7.3

Canvas繪圖7.3.3 通過(guò)JavaScript繪制圖形

6．繪制圖像canvas相當(dāng)有趣的一項(xiàng)功能就是可以引入圖像，它可以用于圖片合成或者制作背景等。只要是Gecko排版引擎支持的圖像（如PNG、GIF、JPEG等）都可以引入到canvas中，并且其它的canvas元素也可以作為圖像的來(lái)源。用戶可以使用drawImage()方法在一個(gè)畫(huà)布上繪制圖像，也可以將源圖像的任意矩形區(qū)域縮放或繪制到畫(huà)布上，語(yǔ)法格式為：格式一：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 通過(guò)JavaScript繪制圖形

6．繪制圖像【例7-12】繪制圖像。頁(yè)面中依次繪制了5幅圖像，分別實(shí)現(xiàn)了原圖繪制、圖像縮小、圖像裁剪、裁剪區(qū)域的放大和裁剪區(qū)域的縮小效果，本例文件7-12.html在瀏覽器中的顯示效果如圖7-12所示。7.4

HTML5地理定位API7.4.1 Geolocation基礎(chǔ)

1．瀏覽器支持IE

9、Firefox、Chrome、Safari以及Opera瀏覽器都支持地理定位，可以使用JavaScript來(lái)驗(yàn)證瀏覽器是否支持地理定位API。代碼如下：if(navigator.geolocation){//支持地理定位API時(shí)執(zhí)行的代碼//navigator.geolocation調(diào)用瀏覽器的地理位置接口}else{//不支持地理定位API時(shí)執(zhí)行的代碼}2．地理定位的實(shí)現(xiàn)方法目前，網(wǎng)站可以使用3種方法來(lái)確定瀏覽者的地理位置。（1）通過(guò)IP地址定位（2）全球定位系統(tǒng)GPS（3）蜂窩電話基站的位置定位7.4

HTML5地理定位API7.4.2 GeolocationAPI實(shí)現(xiàn)地理定位無(wú)論采用上述哪種定位技術(shù)，HTML5都可以采用它進(jìn)行定位。

1．HTML5中地理位置定位的方法GeolocationAPI存在于navigator對(duì)象中，只包含3個(gè)方法：getCurrentPosition()watchPosition()clearWatch()//當(dāng)前位置//監(jiān)視位置//清除監(jiān)視（1）getCurrentPosition()方法要獲取地理位置，GeolocationAPI提供了兩種模式：?jiǎn)未潍@得和重復(fù)獲得地理位置。單次獲得地理位置使用getCurrentPosition()方法，語(yǔ)法格式如下：getCurrentPosition(success,error,option)該方法最多可以有三個(gè)參數(shù)：success：成功獲取位置信息的回調(diào)函數(shù)，它是方法唯一必須的參數(shù)；error：用于捕獲獲取位置信息出錯(cuò)的情況；

option：第三個(gè)參數(shù)是配置項(xiàng)，該對(duì)象影響了獲取位置時(shí)的一些細(xì)節(jié)。7.4

HTML5地理定位API7.4.2 GeolocationAPI實(shí)現(xiàn)地理定位如果獲得地理位置成功，則getCurrentPosition()方法返回位置對(duì)象，包含以下屬性，如表7-11所示。7.4

HTML5地理定位API7.4.2 GeolocationAPI實(shí)現(xiàn)地理定位（2）watchPosition()方法

watchPosition()方法的參數(shù)與getCurrentPosition()方法的參數(shù)相同，用于返回用戶的當(dāng)前位置，并繼續(xù)返回用戶移動(dòng)時(shí)的更新位置。

watchPosition()方法和getCurrentPosition()方法的主要區(qū)別是它會(huì)持續(xù)告訴用戶位置的改變，所以基本上它一直在更新用戶的位置。當(dāng)用戶在移動(dòng)的時(shí)候，這個(gè)功能會(huì)非常有利于追蹤用戶的位置。（3）clearWatch()方法

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

HTML5地理定位API7.4.2GeolocationAPI實(shí)現(xiàn)地理定位

2．在地圖上顯示瀏覽者的位置HTML5提供了地理位置信息的API，通過(guò)瀏覽器來(lái)獲取用戶當(dāng)前位置?；诖颂匦钥梢蚤_(kāi)發(fā)基于位置的定位服務(wù)。在獲取地理位置信息時(shí)，首先瀏覽器都會(huì)向用戶詢問(wèn)是否愿意共享其位置信息，待用戶同意后才能使用。【例7-13】測(cè)試用戶的位置。單擊頁(yè)面中的“試一下”按鈕，彈出對(duì)話框詢問(wèn)用戶是否共享位置信息；用戶同意后，頁(yè)面中顯示出用戶所在的經(jīng)度與緯度，本例文件7-13.html在瀏覽器中的顯示效果如圖7-13和圖7-14所示。7.4

HTML5地理定位API7.4.2GeolocationAPI實(shí)現(xiàn)地理定位

2．在地圖上顯示瀏覽者的位置【例7-14】HTML5獲取地理位置