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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

18、epeat);其中，image是要使用的圖片、畫布或視頻元素；第2個參數(shù)是指定圖案重復(fù)的模式，默認(rèn)為repeat，該模式在水平和垂直方向重復(fù)，也可以指定為repeat-x(只在水平方向重復(fù))、repeat-y(只在垂直方向重復(fù))和no-repeat(不重復(fù))。第31頁設(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頁創(chuàng)建陰影與陰影相關(guān)的屬性有4個：shadowColor、shadowBlur、s

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

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

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

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