第11章HTML5開發(fā)實戰(zhàn)

1、在過去的10年里，網(wǎng)頁設(shè)計師使用 Flash、JavaScript 或其他復(fù)雜的軟件和技術(shù)來創(chuàng)建網(wǎng)站。現(xiàn)在可以使用HTML5實現(xiàn)交互式服務(wù)、單頁UI、交互式游戲、復(fù)雜業(yè)務(wù)應(yīng)用。憑借對標(biāo)準(zhǔn)驅(qū)動的移動應(yīng)用開發(fā)的支持，以及各種強大特性，HTML5迎來了它的黃金時代。本章就來介紹HTML5開發(fā)實戰(zhàn)。掌握HTML5 視頻video掌握HTML5 音頻Audio掌握HTML5 地理定位 掌握HTML5 畫布canvas 掌握HTML5 SVG 以前我們要在網(wǎng)頁中嵌入視頻的最常用的辦法是使用Flash，通過使用object和embed標(biāo)簽，就可以通過瀏覽器播放SWF、FLV等格式視頻文件，但是前提是瀏覽器必

2、須安裝第三方插件Adobe Flash Player。而HTML5的到來，改變了這一事實，只需要使用video標(biāo)簽就可以輕松加載視頻文件，而不需要任何第三方插件。HTML5中的video標(biāo)簽的出現(xiàn)將改變?yōu)g覽器必須加載插件的情況，進一步改善用戶Web體驗，讓用戶在輕松愉快的情況下觀看視頻。HTML5使用video標(biāo)簽可以控制視頻的播放與停止、循環(huán)播放、視頻尺寸等。Video標(biāo)簽含有src、poster、preload、autoplay、loop、controls、width、height等屬性。11.1.1 video11.1.1 video概述概述以前網(wǎng)頁中的大多數(shù)視頻是通過插件來顯示的。然而

3、，并非所有瀏覽器都擁有同樣的插件。HTML5規(guī)定了一種通過video元素來包含視頻的標(biāo)準(zhǔn)方法。11.1.2 11.1.2 在網(wǎng)頁中添加視頻文件在網(wǎng)頁中添加視頻文件Source元素用于給媒體指定多個可選擇的文件地址，且只能在媒體標(biāo)簽沒有使用src屬性時使用。source 元素可以鏈接不同格式的視頻文件。瀏覽器檢測并使用第一個可識別的格式。11.1.3 11.1.3 鏈接不同的視頻文件鏈接不同的視頻文件HTML5規(guī)定了一種通過audio元素來包含音頻的標(biāo)準(zhǔn)方法。audio元素能夠播放聲音文件或者音頻流。11.2.1 Audio11.2.1 Audio元素簡介元素簡介在HTML5中，audio元素與

4、video元素非常類似，但audio元素沒有視頻效果。audio元素是HTML5的一個原生元素，它消除了使用第三方播放器的必要。與video元素類似，可以使用CSS設(shè)置audio元素的樣式。在audio標(biāo)記中，如果不包含controls屬性，則audio播放器將不會呈現(xiàn)在頁面上。在這種情況下，用戶無法使用標(biāo)準(zhǔn)控件來啟動音頻播放。在不呈現(xiàn)audio播放器的情況下，可以啟動audio元素音頻播放的方法放在頁面的load事件中 。11.2.2 11.2.2 隱藏隱藏audioaudio播放器播放器11.2.3 11.2.3 使用使用audioaudio元素的事件元素的事件audio可以觸發(fā)很多事件。

5、其中很多是標(biāo)準(zhǔn)事件，如鼠標(biāo)單擊（click）、鼠標(biāo)移動（mouse move）、獲得焦點（focus）等事件。另外一些則是audio元素所特有的事件，包括播放（play）、暫停（pause）、音量改變（volume change）、播放完畢（ended）等。 地理定位（Geolocation）就是確定某個設(shè)備或用戶在地球上所處位置的過程。Geolocation是HTML5中非常重要的新功能。Internet Explorer 9、Firefox、Chrome、Safari以及Opera支持地理定位。11.3.1 11.3.1 地理定位方法地理定位方法地理位置（Geolocation）是 HTM

6、L5 的重要特性之一，提供了確定用戶位置的功能，借助這個特性能夠開發(fā)基于位置信息的應(yīng)用。目前，Web網(wǎng)站可以使用3種方法來確定你的地理位置 。11.3.2 11.3.2 處理拒絕和錯誤處理拒絕和錯誤獲取用戶的地理位置是沒有保證的。可能會產(chǎn)生一些錯誤。getCurrentPosition方法的第二個參數(shù)showError是一個錯誤處理的回調(diào)函數(shù)。它規(guī)定當(dāng)獲取用戶位置失敗時運行的函數(shù)。11.3.3 11.3.3 在地圖上顯示你的位置在地圖上顯示你的位置Html5中提供了地理位置信息的API，通過瀏覽器來獲取用戶當(dāng)前位置?；诖颂匦钥梢蚤_發(fā)基于位置的服務(wù)應(yīng)用。在獲取地理位置信息前，首先瀏覽器都會向用

7、戶詢問是否愿意共享其位置信息，待用戶同意后才能使用。watchPosition()是返回用戶的當(dāng)前位置，并繼續(xù)返回用戶移動時的更新位置。clearWatch()是停止watchPosition()方法。在HTML5中Canvas元素用于在網(wǎng)頁上繪制圖形，該元素標(biāo)簽強大之處在于可以直接在HTML上進行圖形操作，具有極大的應(yīng)用價值。11.4 HTML5畫布Canvas11.4.1 canvas11.4.1 canvas元素元素canvas元素可以說是HTML5元素中功能最強大的一個。HTML5的canvas元素使用JavaScript在網(wǎng)頁上繪制圖像。畫布是一個矩形區(qū)域，可以控制其每一像素。can

8、vas擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。11.4.2 11.4.2 基本的繪圖操作基本的繪圖操作使用CSS來設(shè)置canvas元素的大小，與直接設(shè)置屬性相比，其差別是基于這樣一個事實的：canvas元素實際上有兩套尺寸。一個是元素本身的大小，還有一個是元素繪圖表面的大小。11.4.3 11.4.3 線性漸變線性漸變線性漸變沿著一條直線路徑，從一種顏色過渡到另外一種顏色。一個線性漸變可以具有多種顏色設(shè)置，每一種顏色設(shè)置在路徑上具有一個不同的位置。這種設(shè)置為如何呈現(xiàn)線性漸變的效果提供了多種可能性 。11.4.4 11.4.4 徑向漸變徑向漸變徑向漸變是從一個點向外圍擴散。可以使用

9、createRadialGradient方法創(chuàng)建徑向漸變。用于創(chuàng)建線性漸變的createLinearGradient方法僅接收4個參數(shù)，與之不同的是，創(chuàng)建徑向漸變的createRadialGradient方法需要接收6個參數(shù)。最好將用于定義徑向漸變的6個參數(shù)視為兩組參數(shù)，每一組包含3個參數(shù)，每一組參數(shù)用于建立一個圓的原點和半徑。只要為這兩個圓設(shè)置不同的參數(shù)，就可以創(chuàng)建徑向漸變效果。11.4.5 11.4.5 繪制精美時鐘繪制精美時鐘前面學(xué)習(xí)了HTML5繪圖canvas的基本知識，本節(jié)講述繪制精美時鐘，效果如圖11.16所示。SVG可縮放矢量圖形是基于可擴展標(biāo)記語言（XML），用于描述二維矢量圖

10、形的一種圖形格式。SVG是W3C制定的一種新的二維矢量圖形格式，也是規(guī)范中的網(wǎng)絡(luò)矢量圖形標(biāo)準(zhǔn)。SVG嚴(yán)格遵從XML語法，并用文本格式的描述性語言來描述圖像內(nèi)容，因此是一種和圖像分辨率無關(guān)的矢量圖形格式。11.5 HTML5SVG11.5.1 SVG11.5.1 SVG概述概述SVG允許三種類型的圖形對象：矢量圖形形狀（例如由直線和曲線組成的路徑）、圖像和文本?？梢詫D形對象（包括文本）分組、樣式化、轉(zhuǎn)換和組合到以前呈現(xiàn)的對象中。SVG 功能集包括嵌套轉(zhuǎn)換、剪切路徑、alpha蒙板和模板對象。SVG繪圖是交互式和動態(tài)的。例如，可使用腳本來定義和觸發(fā)動畫。這一點與Flash相比很強大。Flash是

11、二進制文件，動態(tài)創(chuàng)建和修改都比較困難。而SVG是文本文件，動態(tài)操作是相當(dāng)容易的 。11.5.2 11.5.2 圖形繪制圖形繪制SVG提供了很多的基本形狀，這些元素可以直接使用。11.5.3 11.5.3 文本與圖像文本與圖像SVG的強大能力之一是它可以將文本控制到標(biāo)準(zhǔn)HTML頁面不可能有的程度，而無須求助圖像或其他插件。任何可以在形狀或路徑上執(zhí)行的操作都可以在文本上執(zhí)行。盡管SVG的文本渲染如此強大，但是還是有一個不足之處：SVG不能執(zhí)行自動換行。如果文本比允許空間長，則簡單地將它切斷。多數(shù)情況下，創(chuàng)建多行文本需要多個文本元素。11.5.4 11.5.4 筆畫與填充筆畫與填充填充色fill屬性

12、這個屬性使用設(shè)置的顏色填充圖形內(nèi)部，使用很簡單，直接把顏色值賦給這個屬性就可以了。11.5.5 11.5.5 動畫動畫SVG采用的是使用文本來定義圖形，這種文檔結(jié)構(gòu)非常適合于創(chuàng)建動畫。要改變圖形的位置、大小和顏色，只需要調(diào)整相應(yīng)的屬性就可以了。事實上，SVG有為各種事件處理而專門設(shè)計的屬性，甚至很多還是專門為動畫量身定做的。11.6經(jīng)典習(xí)題1. 1. 填空題填空題（1）HTML5使用_標(biāo)簽可以控制視頻的播放與停止、循環(huán)播放、視頻尺寸等。_標(biāo)簽含有_、_、_、_、_、_、_、_等屬性。（2）HTML5的_元素使用JavaScript在網(wǎng)頁上繪制圖像。畫布是一個矩形區(qū)域，可以控制其每一像素。_擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。 2. 2. 上機操作題