HTML+CSS+JavaScript網(wǎng)頁(yè)設(shè)計(jì)-第5章-網(wǎng)頁(yè)中的多媒體

1、第1頁(yè)第5章網(wǎng)頁(yè)中的多媒體本章概述 本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第2頁(yè)本章概述“超文本”就是指頁(yè)面內(nèi)可以包含圖片、聲音、動(dòng)畫等非文字元素。網(wǎng)頁(yè)中的多媒體有多種不同的格式。本章將學(xué)習(xí)如何在網(wǎng)頁(yè)中添加圖片、動(dòng)畫、音頻、視頻等元素，以及如何使用canvas元素在網(wǎng)頁(yè)中繪制各種圖形、圖像等。第3頁(yè)本章的學(xué)習(xí)目標(biāo)了解常見的圖片格式掌握元素的使用方法了解圖像映射的創(chuàng)建和使用掌握元素的使用方法掌握元素的使用方法掌握元素的使用方法了解在網(wǎng)頁(yè)中嵌入騰訊視頻的方法理解canvas元素的工作原理掌握使用canvas元素繪制圖形/圖像的方法第4頁(yè)主要內(nèi)容5.1 向網(wǎng)頁(yè)中添加圖片5.2 為網(wǎng)頁(yè)添加音頻及視頻5.3 繪制圖形5

2、.4 本章小結(jié)5.5 思考和練習(xí)第5頁(yè)5.1 向網(wǎng)頁(yè)中添加圖片一圖抵千言，圖片是網(wǎng)頁(yè)中不可缺少的元素。在網(wǎng)頁(yè)中巧妙地使用圖片，可以使網(wǎng)頁(yè)圖文并茂，大大增強(qiáng)網(wǎng)頁(yè)的視覺效果，令網(wǎng)頁(yè)更加生動(dòng)多彩。圖片的格式有很多種，Web上大多數(shù)的靜態(tài)圖片都是“點(diǎn)陣圖像”(bitmapped images)。點(diǎn)陣圖像將圖片分解到由像素組成的網(wǎng)格中，并分別為每個(gè)像素指定色彩。第6頁(yè)圖片格式瀏覽器通常支持3種常見的點(diǎn)陣圖像格式，而且大多數(shù)圖像處理軟件也以這些格式保存圖片：GIF、JPEG和PNG。在實(shí)際應(yīng)用中，如果需要在網(wǎng)站中包含很多巨大且復(fù)雜的高分辨率圖片，一種推薦做法是在頁(yè)面初次加載時(shí)向用戶提供圖片的縮小版本，并添

3、加指向大圖的鏈接。這些縮小版本的圖片被稱作“縮略圖(thumbnails)”。一般在相冊(cè)或包含總結(jié)信息的頁(yè)面中都使用這種做法。第7頁(yè)使用添加圖片是一個(gè)獨(dú)立標(biāo)簽，因此沒有結(jié)束標(biāo)簽。該元素必須包含兩個(gè)屬性：src和alt。src屬性用來(lái)指明圖片來(lái)源，其值是一個(gè)URL，可以是絕對(duì)URL，也可以是相對(duì)URL；alt屬性是一段對(duì)圖片進(jìn)行描述的文本，如果瀏覽器無(wú)法顯示圖片，該文本內(nèi)容將代替顯示。除此之外，還常用到height與width屬性，用來(lái)指定圖片的高度與寬度。這兩個(gè)屬性的值通常以像素為單位，也可以是百分比。指定圖片的顯示高度和寬度有利于使頁(yè)面更快、更平滑地得到加載，因?yàn)闉g覽器會(huì)知道應(yīng)該為圖片分配多

4、大的空間，因此它可以在圖片還在載入的同時(shí)準(zhǔn)確地渲染頁(yè)面的其他部分。第8頁(yè)將圖片轉(zhuǎn)換為鏈接將圖片轉(zhuǎn)換為鏈接很簡(jiǎn)單。相比于將文本置于開標(biāo)簽和閉標(biāo)簽之間，圖片鏈接只需要將元素放置于這些標(biāo)簽內(nèi)即可。例如，將【例5-1】中的logo圖片鏈接到一個(gè)企業(yè)網(wǎng)站，可以這樣修改代碼： 這樣，圖片就變成了一個(gè)超鏈接，單擊圖片將跳轉(zhuǎn)到指定的URL。第9頁(yè)創(chuàng)建圖像映射創(chuàng)建圖像映射用到了和兩個(gè)元素：map元素用于定義客戶端圖像映射。圖像映射指帶有可單擊區(qū)域的一幅圖像，中的usemap屬性可引用中的id或name屬性(取決于瀏覽器)，所以，創(chuàng)建圖像映射時(shí)，應(yīng)同時(shí)向添加id和name屬性。area元素用于定義圖像映射中的區(qū)域

5、，當(dāng)用戶單擊這個(gè)區(qū)域時(shí)即可鏈接到指定的頁(yè)面。area元素永遠(yuǎn)嵌套在map元素內(nèi)部，通過(guò)shape屬性指定所選區(qū)域的形狀，然后使用coords屬性指定區(qū)域的坐標(biāo)。第10頁(yè)主要內(nèi)容5.1 向網(wǎng)頁(yè)中添加圖片5.2 為網(wǎng)頁(yè)添加音頻及視頻5.3 繪制圖形5.4 本章小結(jié)5.5 思考和練習(xí)第11頁(yè)5.2 為網(wǎng)頁(yè)添加音頻及視頻Web上的多媒體應(yīng)用經(jīng)歷了重大改進(jìn)，從最初簡(jiǎn)單的MIDI和GIF動(dòng)畫，發(fā)展到現(xiàn)在隨處可見的MP3音樂(lè)、Flash動(dòng)畫和各種在線視頻，同時(shí)也產(chǎn)生了用于播放多媒體內(nèi)容的各種工具和插件，如Windows Media Player、Flash Player、Real Player等。HTML

6、5為多媒體播放新增了兩個(gè)重要元素audio和video第12頁(yè)元素在HTML5之前，大多數(shù)音頻是通過(guò)插件(如Flash)來(lái)播放的。然而，并非所有瀏覽器都擁有同樣的插件。因此，HTML5規(guī)定了在網(wǎng)頁(yè)上嵌入音頻元素的標(biāo)準(zhǔn)，即使用audio元素。 標(biāo)簽定義聲音，比如音樂(lè)或其他音頻流。目前，元素支持3種文件格式：MP3、Wav、Ogg?？梢栽诤椭g放置文本，當(dāng)瀏覽器不支持標(biāo)簽時(shí)將顯示這些文本信息。第13頁(yè)元素如果不確定瀏覽器支持的音頻格式，則可以不使用src屬性，而使用多個(gè)source元素鏈接不同的音頻文件，瀏覽器將使用第一個(gè)支持的音頻文件。source元素用來(lái)為媒體元素(如和)定義媒體資源，通過(guò)sr

7、c屬性指定媒體文件的URL，使用type指定媒體資源的MIME類型。第14頁(yè)video元素video元素的使用格式和audio元素的使用格式非常相似，也是通過(guò)source元素來(lái)組織視頻文件資源。video元素提供播放、暫停和音量控件來(lái)控制視頻，同時(shí)提供width和height屬性來(lái)控制視頻的尺寸。如果設(shè)置了高度和寬度，那兒所需的視頻空間會(huì)在頁(yè)面加載時(shí)保留。如果沒有設(shè)置這些屬性，瀏覽器不知道大小的視頻，瀏覽器就不會(huì)在加載時(shí)保留特定的空間，頁(yè)面會(huì)根據(jù)原始視頻的大小而改變。另外，在與標(biāo)簽之間插入的內(nèi)容被提供給不支持video元素的瀏覽器顯示。第15頁(yè)video元素video元素?fù)碛泻蚢udio元素類

8、似的方法、屬性和事件。video元素的方法、屬性和事件也可以使用JavaScript進(jìn)行控制。其中，video元素的方法用于播放、暫停以及加載等控制；屬性用于讀取或設(shè)置視頻的時(shí)長(zhǎng)、音量等?？梢酝ㄟ^(guò)DOM事件通知video元素開始播放、已暫停、已停止等。第16頁(yè) 元素也是HTML5中的新增元素，這是一個(gè)行內(nèi)標(biāo)記，可以播放音頻、視頻和Flash動(dòng)畫等多媒體文件，其用法與前面介紹的和元素類似。標(biāo)簽定義了一個(gè)容器，用來(lái)嵌入外部應(yīng)用或者互動(dòng)程序(插件)。前面播放音頻和視頻的例子也可以使用來(lái)完成，相應(yīng)的代碼如下：如果播放的是視頻文件，還可以使用width和height屬性指定視頻窗口的大小。第17頁(yè)在頁(yè)面

9、中嵌入騰訊視頻首先，打開騰訊視頻網(wǎng)站首頁(yè)，選擇“電視劇”，在“熱劇精選”中就有如懿傳，如果沒有可以通過(guò)搜索找到，然后進(jìn)入該劇的首頁(yè)，在劇集列表中單擊“01”即可開始在線觀看，此時(shí)瀏覽器地址欄中即為該集的播放地址：/x/cover/1wbx6hb4d3icse8/z0027hcc6iu.html在這個(gè)地址中我們需要的是該頁(yè)的文件名“z0027hcc6iu.html”，其中z0027hcc6iu是該視頻的vid，稍候會(huì)用到。第18頁(yè)在頁(yè)面中嵌入騰訊視頻元素自身與視頻沒有任何關(guān)系。元素，也叫“內(nèi)聯(lián)框架”(inline frame)，是一個(gè)特殊的元素，它可以使用src屬性在一個(gè)網(wǎng)頁(yè)中嵌入另一個(gè)網(wǎng)頁(yè)。第

10、19頁(yè)主要內(nèi)容5.1 向網(wǎng)頁(yè)中添加圖片5.2 為網(wǎng)頁(yè)添加音頻及視頻5.3 繪制圖形5.4 本章小結(jié)5.5 思考和練習(xí)5.3 繪制圖形HTML 5新增了一個(gè)繪圖接口canvas元素，通過(guò)這個(gè)接口，用戶可以在Web中繪制圖形。繪制圖形時(shí)，首先在頁(yè)面上放置一個(gè)canvas元素，就相當(dāng)于在頁(yè)面上放置了一塊畫布，可以在這塊畫布中進(jìn)行圖形繪制，但并不是用鼠標(biāo)畫圖。本節(jié)就來(lái)介紹如何使用canvas元素繪制各種圖形。實(shí)際上，canvas只是一塊無(wú)色透明的區(qū)域，只是一個(gè)JavaScript API，需要通過(guò)JavaScript編寫繪制圖形的腳本。JavaScript將在本書第10章詳細(xì)介紹，本節(jié)用到的JavaS

11、cript腳本比較簡(jiǎn)單，讀者只要理解其功能會(huì)仿照使用即可。第20頁(yè)使用canvas元素canvas元素能夠在網(wǎng)頁(yè)中創(chuàng)建一塊矩形區(qū)域，這塊矩形區(qū)域稱為畫布，在其中可以繪制各種圖形在HTML頁(yè)面中添加canvas元素的方法和添加其他的元素一樣，例如下面的代碼創(chuàng)建了一個(gè)寬400像素、高300像素的canvas對(duì)象。：該瀏覽器不支持HTML5的畫布標(biāo)記！canvas元素本身并不能實(shí)現(xiàn)圖形繪制功能，繪制圖形的工作需要由JavaScript來(lái)完成。使用JavaScript可以在canvas元素內(nèi)部添加線條、圖片和文字，也可以在其中繪畫，還能夠加入高級(jí)動(dòng)畫。第21頁(yè)使用canvas元素繪制圖形的步驟(1)

12、在頁(yè)面中添加canvas元素，必須定義canvas元素的id屬性值，以便在JavaScript腳本這調(diào)用(2) 在JavaScript腳本中通過(guò)id找到canvas元素(3) 通過(guò)canvas元素的getContext方法獲取其上下文，即創(chuàng)建Context對(duì)象，獲取可繪制圖形的2D環(huán)境(4) 使用Context對(duì)象的方法進(jìn)行圖形繪制第22頁(yè)CanvasRenderingContext2D對(duì)象通過(guò)canvas對(duì)象的getContext(2d)方法返回的是一個(gè)CanvasRenderingContext2D對(duì)象。CanvasRenderingContext2D對(duì)象提供了一組用來(lái)在畫布上繪制圖形的方

13、法。使用這些方法可以繪制各種圖形、圖像等第23頁(yè)繪制簡(jiǎn)單圖形使用canvas元素繪制圖形時(shí)需要注意，每個(gè)canvas上下文僅有一個(gè)當(dāng)前Path。通過(guò)beginPath方法可以開始一個(gè)Path，通過(guò)closePath方法結(jié)束一個(gè)Path。對(duì)于填充類的圖形，通過(guò)fillStyle屬性設(shè)置填充顏色，繪制圖形邊框的顏色通過(guò)strokeStyle屬性設(shè)置。第24頁(yè)清空畫布常見的清空畫布的方法有以下3種：第一種，也就是最簡(jiǎn)單的辦法，由于canvas每當(dāng)高度或?qū)挾缺恢卦O(shè)時(shí)，畫布內(nèi)容就會(huì)被清空，因此可以通過(guò)設(shè)置高度或?qū)挾葋?lái)清空畫布第二種方法是使用clearRect方法第三種方法類似于第二種方法，可以用某一特定

14、顏色填充畫布，從而達(dá)到清空的目的第25頁(yè)保存與恢復(fù)canvas狀態(tài)當(dāng)在畫布上使用其2D上下文進(jìn)行圖形繪制時(shí)，可以通過(guò)操作2D上下文屬性來(lái)繪制不同風(fēng)格的圖形，例如不同的線條、填充等。通常情況下，在畫布上繪圖時(shí)，需要更改在繪制的2D背景下的狀態(tài)。例如，需要設(shè)置strokStyle屬性或進(jìn)行旋轉(zhuǎn)操作等，這些操作通過(guò)設(shè)置2D上下文屬性來(lái)實(shí)現(xiàn)。由于設(shè)置繪圖的屬性非常煩瑣，每次更改時(shí)都要重來(lái)一次，因此，我們可以考慮利用堆棧來(lái)保持繪圖的屬性并在需要的時(shí)候隨時(shí)恢復(fù)。這就用到了下面兩個(gè)方法：context.save(); context.restore(); 第26頁(yè)移動(dòng)坐標(biāo)空間canvas坐標(biāo)空間默認(rèn)以畫布左

15、上角為原點(diǎn)，x軸水平向右為正方向，y軸垂直向下為正方向，該坐標(biāo)空間的單位通常為像素。在繪制圖形時(shí)，可以使用translate方法移動(dòng)坐標(biāo)空間，使畫布的變換矩陣發(fā)生水平和垂直方向的偏移，其用法如下：context.translate(dx,dy);其中，dx、dy分別為坐標(biāo)原點(diǎn)沿水平和垂直兩個(gè)方向的偏移量第27頁(yè)旋轉(zhuǎn)坐標(biāo)空間若要旋轉(zhuǎn)坐標(biāo)空間，應(yīng)使用rotate方法。rotate方法用于以原點(diǎn)為中心旋轉(zhuǎn)canvas，實(shí)質(zhì)上仍是旋轉(zhuǎn)canvas上下文對(duì)象的坐標(biāo)空間，用法如下：context.rotate(angle);其中，參數(shù)angle為旋轉(zhuǎn)的角度，旋轉(zhuǎn)角度以順時(shí)針?lè)较驗(yàn)檎较颍曰《葹閱挝?，旋轉(zhuǎn)

16、中心為canvas的原點(diǎn)第28頁(yè)縮放圖形縮放圖形主要通過(guò)scale方法來(lái)實(shí)現(xiàn)，具體使用格式如下：context.scale(x,y);其中，參數(shù)x為x軸的縮放，參數(shù)y為y軸的縮放。如果要縮小，參數(shù)值為小于1的數(shù)值；如果要放大，參數(shù)值為大于1的數(shù)值。第29頁(yè)使用漸變色填充圖形線性漸變：是指從開始點(diǎn)到結(jié)束點(diǎn)，顏色呈直線的徐徐變化的效果。為了實(shí)現(xiàn)這種效果，我們繪制時(shí)必須指定開始和結(jié)束的顏色。而在canvas中，不僅可以只指定開始和結(jié)尾的兩點(diǎn)，中間位置也能指定。使用表5-2中的createLinearGradient方法創(chuàng)建一個(gè)代表線性漸變的CanvasGradient對(duì)象，通過(guò)這個(gè)對(duì)象的addCol

17、orStop方法添加顏色。放射性漸變：也叫環(huán)形漸變，實(shí)現(xiàn)由圓心(或是較小的同心圓)開始向外擴(kuò)散漸變的效果。使用表5-2中的createRadialGradient方法來(lái)創(chuàng)建一個(gè)代表放射顏色漸變的CanvasGradient對(duì)象，需要指定起始圓和結(jié)束圓的圓心和半徑。第30頁(yè)使用圖案填充圖形在canvas中，createPattern方法用來(lái)實(shí)現(xiàn)圖案效果，在指定的方向重復(fù)指定的元素。元素可以是圖片、視頻或其他canvas元素。被重復(fù)的元素可用于繪制/填充矩形、圓形或線條等。其用法如下：context.createPattern(image,repeat|repeat-x|repeat-y|no-r

18、epeat);其中，image是要使用的圖片、畫布或視頻元素；第2個(gè)參數(shù)是指定圖案重復(fù)的模式，默認(rèn)為repeat，該模式在水平和垂直方向重復(fù)，也可以指定為repeat-x(只在水平方向重復(fù))、repeat-y(只在垂直方向重復(fù))和no-repeat(不重復(fù))。第31頁(yè)設(shè)置圖形的透明度使用rgba方法可以設(shè)置具有透明度的顏色，用法如下：rgba(R,G,B,A)其中，R、G、B為0255的十進(jìn)制整數(shù)，分別表示顏色的紅色、綠色和藍(lán)色分量，是透明度，為0.01.0的浮點(diǎn)數(shù)值，0.0為完全透明，1.0為完全不透明。第32頁(yè)創(chuàng)建陰影與陰影相關(guān)的屬性有4個(gè)：shadowColor、shadowBlur、s

19、hadowOffsetX、shadowOffsetY。其中，shadowColor定義陰影顏色樣式，shadowBlur定義陰影模糊系數(shù)，shadowOffsetX定義陰影的x軸偏移量，shadowOffsetY定義陰影的y軸偏移量。需要注意的是，定義shadowColor后，至少需要用shadowBlur定義陰影模糊系數(shù)，否則看不到陰影效果。第33頁(yè)drawImage()方法drawImage()方法用來(lái)在畫布上繪制圖像、畫布或視頻。該方法也能夠繪制圖像的某些部分，或者增加或減少圖像的尺寸。最簡(jiǎn)單的drawImage()方法只需指定圖像和圖像在畫布中的位置，如下所示：context.draw

20、Image(img,x,y);也可以在繪制圖像時(shí)指定圖像的寬度和高度：context.drawImage(img,x,y,width,height);還可以只剪切圖像的某個(gè)矩形區(qū)域，并將其繪制到畫布：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);其中，sx和xy為開始剪切的x、y坐標(biāo)；swidth和sheight為剪切的寬度和高度。第34頁(yè)使用任意路徑剪裁圖像canvas的圖像裁剪功能是指，在畫布內(nèi)使用路徑，只繪制路徑所包括區(qū)域內(nèi)的圖像，不繪制路徑外部的圖像。前面使用drawImage()方法只能剪裁矩形區(qū)域，要使用任

21、意路徑剪裁圖像可以使用CanvasRenderingContext2D對(duì)象的不帶參數(shù)的clip方法來(lái)實(shí)現(xiàn)。clip方法使用路徑來(lái)對(duì)canvas畫布設(shè)置一塊裁剪區(qū)域。因此，必須先創(chuàng)建路徑。路徑創(chuàng)建完畢后，調(diào)用clip方法來(lái)設(shè)置裁剪區(qū)域。第35頁(yè)混合圖像混合模式是指將上層的圖像融入下層的圖像時(shí)采用的各種模式。根據(jù)所選的模式，可以看到不同的融合后的效果?；旌夏Ｊ讲扇′佋O(shè)在彼此頂部的兩個(gè)像素，并結(jié)合它們不同的方式進(jìn)行展現(xiàn)，例如較深的顏色混合模式只會(huì)呈現(xiàn)兩個(gè)像素的顏色較深。 在擴(kuò)展到整個(gè)圖像時(shí)，混合模式可以產(chǎn)生一些令人驚艷的效果。第36頁(yè)繪制文本繪制文本用到了canvas對(duì)象的fillText和stro

22、keText方法。在繪制文本之前，可以先對(duì)有關(guān)文字繪制的屬性進(jìn)行設(shè)置，這些屬性包括：font：指定要繪制的文本的字體樣式，默認(rèn)的字體樣式為10px sans-serif，設(shè)置該屬性的語(yǔ)法與 CSS font屬性相同，本書第8章會(huì)詳細(xì)介紹textAlign：指定繪制文本的對(duì)齊方式，有l(wèi)eft(左對(duì)齊)、right(右對(duì)齊)、center(居中對(duì)齊)、start(如果文字從左往右排版，則左對(duì)齊；如果從右往左排版，則右對(duì)齊)和end(效果和start對(duì)齊方式正好相反)5種對(duì)齊方式，默認(rèn)為start。textBaseline：指定繪制文本時(shí)的當(dāng)前文本基線，有6個(gè)可取值，默認(rèn)為alphabetic(文本基線是普通的字母基線)，還有top(文本基線是em方框的頂端)、hanging(文本