第11章HTML5開(kāi)發(fā)實(shí)戰(zhàn)

教學(xué)內(nèi)容：在過(guò)去的10年里，網(wǎng)頁(yè)設(shè)計(jì)師使用Flash、JavaScript或其他復(fù)雜的軟件和技術(shù)來(lái)創(chuàng)建網(wǎng)站?，F(xiàn)在可以使用HTML5實(shí)現(xiàn)交互式服務(wù)、單頁(yè)UI、交互式游戲、復(fù)雜業(yè)務(wù)應(yīng)用。憑借對(duì)標(biāo)準(zhǔn)驅(qū)動(dòng)的移動(dòng)應(yīng)用開(kāi)發(fā)的支持，以及各種強(qiáng)大特性，HTML5迎來(lái)了它的黃金時(shí)代。本章就來(lái)介紹HTML5開(kāi)發(fā)實(shí)戰(zhàn)。第11章HTML5開(kāi)發(fā)實(shí)戰(zhàn)教學(xué)重點(diǎn)掌握HTML5視頻video掌握HTML5音頻Audio掌握HTML5地理定位掌握HTML5畫(huà)布canvas掌握HTML5SVG11.1HTNL5視頻video以前我們要在網(wǎng)頁(yè)中嵌入視頻的最常用的辦法是使用Flash，通過(guò)使用object和embed標(biāo)簽，就可以通過(guò)瀏覽器播放SWF、FLV等格式視頻文件，但是前提是瀏覽器必須安裝第三方插件AdobeFlashPlayer。而HTML5的到來(lái)，改變了這一事實(shí)，只需要使用video標(biāo)簽就可以輕松加載視頻文件，而不需要任何第三方插件。HTML5中的video標(biāo)簽的出現(xiàn)將改變?yōu)g覽器必須加載插件的情況，進(jìn)一步改善用戶Web體驗(yàn)，讓用戶在輕松愉快的情況下觀看視頻。HTML5使用video標(biāo)簽可以控制視頻的播放與停止、循環(huán)播放、視頻尺寸等。Video標(biāo)簽含有src、poster、preload、autoplay、loop、controls、width、height等屬性。11.1.1video概述以前網(wǎng)頁(yè)中的大多數(shù)視頻是通過(guò)插件來(lái)顯示的。然而，并非所有瀏覽器都擁有同樣的插件。HTML5規(guī)定了一種通過(guò)video元素來(lái)包含視頻的標(biāo)準(zhǔn)方法。11.1.2在網(wǎng)頁(yè)中添加視頻文件Source元素用于給媒體指定多個(gè)可選擇的文件地址，且只能在媒體標(biāo)簽沒(méi)有使用src屬性時(shí)使用。source

元素可以鏈接不同格式的視頻文件。瀏覽器檢測(cè)并使用第一個(gè)可識(shí)別的格式。11.1.3鏈接不同的視頻文件HTML5規(guī)定了一種通過(guò)audio元素來(lái)包含音頻的標(biāo)準(zhǔn)方法。audio元素能夠播放聲音文件或者音頻流。11.2HTML5音頻Audio11.2.1Audio元素簡(jiǎn)介在HTML5中，audio元素與video元素非常類(lèi)似，但audio元素沒(méi)有視頻效果。audio元素是HTML5的一個(gè)原生元素，它消除了使用第三方播放器的必要。與video元素類(lèi)似，可以使用CSS設(shè)置audio元素的樣式。在audio標(biāo)記中，如果不包含controls屬性，則audio播放器將不會(huì)呈現(xiàn)在頁(yè)面上。在這種情況下，用戶無(wú)法使用標(biāo)準(zhǔn)控件來(lái)啟動(dòng)音頻播放。在不呈現(xiàn)audio播放器的情況下，可以啟動(dòng)audio元素音頻播放的方法放在頁(yè)面的load事件中。11.2.2隱藏audio播放器11.2.3使用audio元素的事件audio可以觸發(fā)很多事件。其中很多是標(biāo)準(zhǔn)事件，如鼠標(biāo)單擊（click）、鼠標(biāo)移動(dòng)（mousemove）、獲得焦點(diǎn)（focus）等事件。另外一些則是audio元素所特有的事件，包括播放（play）、暫停（pause）、音量改變（volumechange）、播放完畢（ended）等。11.3HTML5地理定位

地理定位（Geolocation）就是確定某個(gè)設(shè)備或用戶在地球上所處位置的過(guò)程。Geolocation是HTML5中非常重要的新功能。InternetExplorer9、Firefox、Chrome、Safari以及Opera支持地理定位。11.3.1地理定位方法地理位置（Geolocation）是HTML5的重要特性之一，提供了確定用戶位置的功能，借助這個(gè)特性能夠開(kāi)發(fā)基于位置信息的應(yīng)用。目前，Web網(wǎng)站可以使用3種方法來(lái)確定你的地理位置。11.3.2處理拒絕和錯(cuò)誤獲取用戶的地理位置是沒(méi)有保證的。可能會(huì)產(chǎn)生一些錯(cuò)誤。getCurrentPosition方法的第二個(gè)參數(shù)showError是一個(gè)錯(cuò)誤處理的回調(diào)函數(shù)。它規(guī)定當(dāng)獲取用戶位置失敗時(shí)運(yùn)行的函數(shù)。11.3.3在地圖上顯示你的位置Html5中提供了地理位置信息的API，通過(guò)瀏覽器來(lái)獲取用戶當(dāng)前位置?；诖颂匦钥梢蚤_(kāi)發(fā)基于位置的服務(wù)應(yīng)用。在獲取地理位置信息前，首先瀏覽器都會(huì)向用戶詢問(wèn)是否愿意共享其位置信息，待用戶同意后才能使用。watchPosition()是返回用戶的當(dāng)前位置，并繼續(xù)返回用戶移動(dòng)時(shí)的更新位置。clearWatch()是停止watchPosition()方法。在HTML5中Canvas元素用于在網(wǎng)頁(yè)上繪制圖形，該元素標(biāo)簽強(qiáng)大之處在于可以直接在HTML上進(jìn)行圖形操作，具有極大的應(yīng)用價(jià)值。11.4HTML5畫(huà)布Canvas11.4.1canvas元素canvas元素可以說(shuō)是HTML5元素中功能最強(qiáng)大的一個(gè)。HTML5的canvas元素使用JavaScript在網(wǎng)頁(yè)上繪制圖像。畫(huà)布是一個(gè)矩形區(qū)域，可以控制其每一像素。canvas擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。11.4.2基本的繪圖操作使用CSS來(lái)設(shè)置canvas元素的大小，與直接設(shè)置屬性相比，其差別是基于這樣一個(gè)事實(shí)的：canvas元素實(shí)際上有兩套尺寸。一個(gè)是元素本身的大小，還有一個(gè)是元素繪圖表面的大小。11.4.3線性漸變線性漸變沿著一條直線路徑，從一種顏色過(guò)渡到另外一種顏色。一個(gè)線性漸變可以具有多種顏色設(shè)置，每一種顏色設(shè)置在路徑上具有一個(gè)不同的位置。這種設(shè)置為如何呈現(xiàn)線性漸變的效果提供了多種可能性。11.4.4徑向漸變徑向漸變是從一個(gè)點(diǎn)向外圍擴(kuò)散?？梢允褂胏reateRadialGradient方法創(chuàng)建徑向漸變。用于創(chuàng)建線性漸變的createLinearGradient方法僅接收4個(gè)參數(shù)，與之不同的是，創(chuàng)建徑向漸變的createRadialGradient方法需要接收6個(gè)參數(shù)。最好將用于定義徑向漸變的6個(gè)參數(shù)視為兩組參數(shù)，每一組包含3個(gè)參數(shù)，每一組參數(shù)用于建立一個(gè)圓的原點(diǎn)和半徑。只要為這兩個(gè)圓設(shè)置不同的參數(shù)，就可以創(chuàng)建徑向漸變效果。11.4.5繪制精美時(shí)鐘前面學(xué)習(xí)了HTML5繪圖canvas的基本知識(shí)，本節(jié)講述繪制精美時(shí)鐘，效果如圖11.16所示。SVG可縮放矢量圖形是基于可擴(kuò)展標(biāo)記語(yǔ)言（XML），用于描述二維矢量圖形的一種圖形格式。SVG是W3C制定的一種新的二維矢量圖形格式，也是規(guī)范中的網(wǎng)絡(luò)矢量圖形標(biāo)準(zhǔn)。SVG嚴(yán)格遵從XML語(yǔ)法，并用文本格式的描述性語(yǔ)言來(lái)描述圖像內(nèi)容，因此是一種和圖像分辨率無(wú)關(guān)的矢量圖形格式。11.5HTML5SVG11.5.1SVG概述SVG允許三種類(lèi)型的圖形對(duì)象：矢量圖形形狀（例如由直線和曲線組成的路徑）、圖像和文本?？梢詫D形對(duì)象（包括文本）分組、樣式化、轉(zhuǎn)換和組合到以前呈現(xiàn)的對(duì)象中。SVG功能集包括嵌套轉(zhuǎn)換、剪切路徑、alpha蒙板和模板對(duì)象。SVG繪圖是交互式和動(dòng)態(tài)的。例如，可使用腳本來(lái)定義和觸發(fā)動(dòng)畫(huà)。這一點(diǎn)與Flash相比很強(qiáng)大。Flash是二進(jìn)制文件，動(dòng)態(tài)創(chuàng)建和修改都比較困難。而SVG是文本文件，動(dòng)態(tài)操作是相當(dāng)容易的。11.5.2圖形繪制SVG提供了很多的基本形狀，這些元素可以直接使用。11.5.3文本與圖像SVG的強(qiáng)大能力之一是它可以將文本控制到標(biāo)準(zhǔn)HTML頁(yè)面不可能有的程度，而無(wú)須求助圖像或其他插件。任何可以在形狀或路徑上執(zhí)行的操作都可以在文本上執(zhí)行。盡管SVG的文本渲染如此強(qiáng)大，但是還是有一個(gè)不足之處：SVG不能執(zhí)行自動(dòng)換行。如果文本比允許空間長(zhǎng)，則簡(jiǎn)單地將它切斷。多數(shù)情況下，創(chuàng)建多行文本需要多個(gè)文本元素。11.5.4筆畫(huà)與填充填充色fill屬性這個(gè)屬性使用設(shè)置的顏色填充圖形內(nèi)部，使用很簡(jiǎn)單，直接把顏色值賦給這個(gè)屬性就可以了。11.5.5動(dòng)畫(huà)SVG采用的是使用文本來(lái)定義圖形，這種文檔結(jié)構(gòu)非常適合于創(chuàng)建動(dòng)畫(huà)。要改變圖形的位置、大小和顏色，只需要調(diào)整相應(yīng)的屬性就可以了。事實(shí)上，SVG有為各種事件處理而專(zhuān)門(mén)設(shè)計(jì)的屬性，甚至很多還是專(zhuān)門(mén)為動(dòng)畫(huà)量身定做的。11.6經(jīng)典習(xí)題1.填空題（1）HTML5使用_________標(biāo)簽可以控制視頻的播放與停止、循環(huán)播放、視頻尺寸等。_________標(biāo)簽含有______、______、____