第7章HTML5畫布API主講人：XX老師本章學(xué)習(xí)目標(biāo)了解畫布的概念和畫布坐標(biāo)系；掌握畫布的創(chuàng)建方法；掌握繪制路徑與矩形的方法；掌握繪制圖片與文本的方法；掌握設(shè)置畫筆顏色與樣式的方法；掌握繪畫的保存與恢復(fù)功能的應(yīng)用；掌握圖像變形與剪裁的應(yīng)用。目錄7.1畫布（Canvas）概述7.2HTML5畫布API的應(yīng)用 7.1.1HTML5畫布7.1.2畫布坐標(biāo)7.1.3主流瀏覽器支持情況一覽

7.1畫布（Canvas）概述7.1.1HTML5畫布畫布（Canvas）的概念最早是由蘋果公司提出并用于MacOSWeb套件上的。在此之前，開發(fā)者只能通過在瀏覽器上安裝插件的方式調(diào)用一些第三方的畫圖API，例如Adobe公司提供的Flash和SVG插件。這些插件基本都是將矢量圖轉(zhuǎn)換為矢量標(biāo)記語言(VectorMarkupLanguage，VML)的形式使用。

7.1.1HTML5畫布HTML5畫布API提供了<canvas>標(biāo)簽用于在網(wǎng)頁上創(chuàng)建矩形的畫布區(qū)域，配合以JavaScript即可在畫布區(qū)域動態(tài)繪制需要的內(nèi)容。目前所有的主流瀏覽器都提供了對于HTML5畫布API的支持。

7.1.2畫布坐標(biāo)畫布坐標(biāo)系中原點的位置在畫布矩形框的左上角，即(0,0)坐標(biāo)的位置。該坐標(biāo)系與數(shù)學(xué)坐標(biāo)系在水平方向上一致，垂直方向為鏡像對稱。也就是說畫布坐標(biāo)系的水平方向為x軸，其正方向為向右延伸；垂直方向為y軸，其正方向為向下延伸。

7.1.2畫布坐標(biāo)具體的坐標(biāo)系如圖所示。

7.1.3主流瀏覽器支持情況一覽

7.2.1檢查瀏覽器支持情況7.2.2創(chuàng)建畫布7.2.3畫布繪制方法7.2.4繪制路徑7.2.5繪制矩形7.2.6繪制圖片 7.2HTML5畫布API的應(yīng)用7.2.7繪制文本7.2.8顏色與樣式7.2.9保存和恢復(fù)7.2.10變形7.2.11剪裁 7.2.1檢查瀏覽器支持情況

在使用HTML5畫布API之前，先對瀏覽器進行檢測以確認(rèn)其支持情況?？梢灾苯釉诋嫴紭?biāo)簽<canvas>和</canvas>之間填寫瀏覽器不支持時的提示語句，如果瀏覽器支持畫布標(biāo)簽則該語句不會被顯示出來。

7.2.1檢查瀏覽器支持情況【例7-1】檢查瀏覽器對HTML5畫布API的支持情況

7.2.2創(chuàng)建畫布在HTML5中創(chuàng)建畫布需要使用<canvas>元素，該元素的首尾標(biāo)簽<canvas>和</canvas>可以創(chuàng)建出一個默認(rèn)尺寸為寬300像素、高150像素的矩形框。也可以在<canvas>標(biāo)簽中自定義畫布的寬度和高度。7.2.2創(chuàng)建畫布基本語法結(jié)構(gòu)如下：<canvasid="自定義id名稱"width="寬度值"height="高度值"></canvas>其中<canvas>標(biāo)簽的id屬性為必填內(nèi)容，使用JavaScript進行繪圖時可根據(jù)id找到需要繪圖的畫布，該名稱可自定義。width和height屬性分別表示畫布的寬度和高度，可填入長度數(shù)值，其默認(rèn)單位均為像素（px）。7.2.2創(chuàng)建畫布例如，創(chuàng)建一個id名稱為canvas01，寬度為300px，高度為200px的畫布，代碼如下：<canvasid="canvas01"width="300"height="200"></canvas>此時畫布會被創(chuàng)建在HTML5頁面上。由于畫布默認(rèn)是無邊框的，因此該畫布創(chuàng)建完成時是不可見的?？筛鶕?jù)實際開發(fā)需要使用CSS樣式表為畫布添加邊框。<canvas>元素也支持HTML中的一些常規(guī)CSS樣式設(shè)置，例如邊框、背景顏色、大小等。7.2.2創(chuàng)建畫布例如，使用CSS行內(nèi)樣式表為上述畫布添加邊框效果，代碼如下：<canvasid="canvas01"width="300"height="200"style="border:1pxsolid"></canvas>此段代碼可以創(chuàng)建一個帶有1像素寬的實線黑色邊框。7.2.2創(chuàng)建畫布【例7-2】第一個畫布頁面

7.2.3畫布繪制方法在HTML5中，<canvas>元素本身沒有繪圖能力，所有的繪圖代碼需要使用JavaScript完成。首先需要在JavaScript中創(chuàng)建context對象，然后用該對象動態(tài)的繪制畫布內(nèi)容。7.2.3畫布繪制方法其語法結(jié)構(gòu)如下：<script>//根據(jù)id找到指定的畫布varc=document.getElementById("畫布id");//創(chuàng)建2D的context對象varctx=c.getContext("2d");//繪圖代碼</script>7.2.4繪制路徑1.繪制線段2.繪制三角形3.繪制圓弧4.繪制曲線5.繪制其他自定義形狀7.2.4繪制路徑路徑（Path）是繪制圖形輪廓時畫筆留下的軌跡，也可以理解為畫筆畫出的像素點組成的線條。多個點形成線段或曲線，不同的線段或曲線相連接又形成了各種形狀效果。7.2.4繪制路徑繪制路徑主要有以下4種方法：beginPath()：用于新建一條路徑，也是圖形繪制的起點。closePath()：該方法用于閉合路徑。當(dāng)執(zhí)行該方法時會從畫筆的當(dāng)前坐標(biāo)位置繪制一條線段到初始坐標(biāo)位置來閉合圖形。stroke()：在圖形輪廓勾勒完畢后需要執(zhí)行該方法才能正式將路徑渲染到畫布上。fill()：可以使用該方法為圖形填充顏色，生成實心的圖形。7.2.4繪制路徑1.繪制線段在HTML5畫布中通過指定畫筆的初始坐標(biāo)位置和移動到的新坐標(biāo)位置可以進行線段的繪制。繪制線段主要有以下3種方法：moveTo(x,y):將當(dāng)前的畫筆直線移動到指定的(x,y)坐標(biāo)上，并且不留下移動痕跡。lineTo(x,y)：將當(dāng)前的畫筆直線移動到指定的(x,y)坐標(biāo)上，并且畫出移動痕跡。stroke()：在繪制完成后使用該方法可以在畫布上一次性渲染出效果。7.2.4繪制路徑1.繪制線段【例7-3】繪制線段的簡單應(yīng)用7.2.4繪制路徑2.繪制三角形三角形的繪制其實就是分別繪制三條線段，并且讓它們首尾相連組成形狀。在HTML5畫布中繪制三角形會用到上一小節(jié)中繪制線段的moveTo()方法和lineTo()方法。7.2.4繪制路徑2.繪制三角形【例7-4】繪制三角形的簡單應(yīng)用7.2.4繪制路徑3.繪制圓弧除了直線路徑外，HTML5畫布還可以在JavaScript中使用arc()函數(shù)繪制圓弧。其基本語法格式如下：arc(x,y,radius,startAngle,endAngle,anticlockwise)arc()函數(shù)共包含了6個參數(shù)，解釋如下：x和y表示圓心在(x,y)坐標(biāo)位置上；radius為圓弧的半徑，默認(rèn)單位為像素；startAngle為開始的角度，endAngle為結(jié)束的角度；anticloclwise指的是繪制方向，可填入一個布爾值。其中true表示順時針繪制，false表示逆時針繪制。7.2.4繪制路徑3.繪制圓弧注意：arc()函數(shù)中的角度單位是弧度，使用時不可直接填入度數(shù)單位，需要進行轉(zhuǎn)換。轉(zhuǎn)換公式如下：弧度=π/180x度數(shù)其中特殊弧度半圓(180°)轉(zhuǎn)換后弧度為π，圓(360°)轉(zhuǎn)換后弧度為2π。在開發(fā)過程中遇到這兩種情況可以免于換算，直接使用轉(zhuǎn)換結(jié)果。7.2.4繪制路徑3.繪制圓弧例如，繪制一個圓心在坐標(biāo)(100,100)、半徑為50像素的圓形：ctx.arc(100,100,50,0,Math.PI*2,true);由于圓形是旋轉(zhuǎn)360度的特殊圓弧，看不出順時針和逆時針的區(qū)別，因此用于規(guī)定繪制方向的最后一個參數(shù)填入true或false均可。7.2.4繪制路徑3.繪制圓弧【例7-5】繪制圓弧的簡單應(yīng)用7.2.4繪制路徑4.繪制曲線在HTML5畫布API中繪制曲線的原理來自于貝塞爾曲線（BezierCurve）。貝塞爾曲線又稱為貝茲曲線或者貝濟埃曲線，由法國數(shù)學(xué)家PierreBezier發(fā)明，是計算機圖形學(xué)中非常重要的參數(shù)曲線，也是應(yīng)用于2D圖形應(yīng)用程序的數(shù)學(xué)曲線。7.2.4繪制路徑4.繪制曲線貝塞爾曲線由曲線與節(jié)點組成，節(jié)點上有控制線和控制點可以拖動，曲線在節(jié)點的控制下可以伸縮。一些矢量圖形軟件用其來精確繪制曲線，如AdobePhotoshop、AdobeIllustrator等。7.2.4繪制路徑4.繪制曲線貝塞爾曲線一般用來繪制較為復(fù)雜的規(guī)律圖形。根據(jù)控制點數(shù)量不同，分為二次貝塞爾曲線和三次貝塞爾曲線。二次貝塞爾曲線語法結(jié)構(gòu)如下：quadraticCurveTo(cp1x,cp1y,x,y)其中(cp1x,cp1y)為控制點的坐標(biāo)，(x,y)為結(jié)束點的坐標(biāo)。7.2.4繪制路徑4.繪制曲線三次貝塞爾曲線語法結(jié)構(gòu)如下：bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)其中(cp1x,cp1y)為控制點一的坐標(biāo)，(cp2x,cp2y)為控制點二的坐標(biāo)，(x,y)為結(jié)束點的坐標(biāo)。7.2.4繪制路徑4.繪制曲線【例7-6】在畫布上繪制貝塞爾曲線7.2.4繪制路徑5.繪制其他自定義形狀和繪制三角形的原理類似，如果自定義多條線段的起始和結(jié)束為止，令它們互相連結(jié)可以形成多樣化的自定義形狀。7.2.4繪制路徑5.繪制其他自定義形狀【例7-7】繪制自定義形狀7.2.5繪制矩形1.繪制帶邊框的空心矩形2.用顏色填充矩形3.清空矩形區(qū)域7.2.5繪制矩形1.繪制帶邊框的空心矩形在HTML5中可以使用strokeRect()方法繪制帶邊框的矩形，其語法結(jié)構(gòu)如下：strokeRect(x,y,width,height)其中x和y規(guī)定了矩形左上角的坐標(biāo)位置為(x,y)，width為矩形的寬度，height為矩形的高度，默認(rèn)單位均為像素(px)。7.2.5繪制矩形1.繪制帶邊框的空心矩形【例7-8】繪制帶邊框空心矩形的簡單應(yīng)用

7.2.5繪制矩形2.用顏色填充矩形在HTML5中使用fillRect()方法繪制填充顏色的實心矩形，其語法結(jié)構(gòu)如下：fillRect(x,y,width,height)該方法與strokeRect()方法的參數(shù)類似，其中x和y規(guī)定了矩形左上角的坐標(biāo)位置為(x,y)，width為矩形的寬度，height為矩形的高度，默認(rèn)單位為像素(px)。畫筆默認(rèn)是黑色的，如果需要切換成其他顏色，可以在繪制之前重新定義context對象中的fillStyle屬性。7.2.5繪制矩形2.用顏色填充矩形【例7-9】繪制帶實心矩形的簡單應(yīng)用7.2.5繪制矩形3.清空矩形區(qū)域在HTML5中使用clearRect()方法清空矩形的區(qū)域，其語法結(jié)構(gòu)如下：clearRect(x,y,width,height)同樣是x和y規(guī)定了矩形左上角的坐標(biāo)位置為(x,y)，width為矩形的寬度，height為矩形的高度，默認(rèn)單位為像素(px)。該方法類似橡皮擦的功能，可以將畫布上覆蓋的顏色擦除，顯露出畫布本身的背景顏色。7.2.5繪制矩形3.清空矩形區(qū)域【例7-10】清空矩形區(qū)域的簡單應(yīng)用7.2.6繪制圖片1.裝載圖片2.繪制圖片3.縮放圖片4.圖片切割7.2.6繪制圖片1.裝載圖片在JavaScript中，可以直接使用Image()構(gòu)造函數(shù)來創(chuàng)建一個新的圖片對象。例如，裝載一張名稱為hello.png的圖片：varimg=newImage();img.src="hello.png";此時圖片只是指定了來源，暫時還未繪制在畫布上，因此看不到任何效果。7.2.6繪制圖片2.繪制圖片圖片裝載完畢后，可以使用drawImage()方法繪制圖片，語法如下：ctx.drawImage(image,x,y);其中image是圖片對象的自定義名稱，x和y指的是該圖片在畫布中的起始位置在(x,y)坐標(biāo)上。7.2.6繪制圖片2.繪制圖片例如：varimg=newImage();img.src="ballon.jpg";ctx.drawImage(img,0,0);上述代碼表示繪制一張名稱為balloon.jpg的圖片，并將其左上角放置在原點上。此時繪制的圖片尺寸與原圖一致。7.2.6繪制圖片2.繪制圖片有時由于圖片過大導(dǎo)致加載時間較長，在圖片還未加載完畢時就執(zhí)行了drawImage()方法可能導(dǎo)致圖片無法正常顯示。此時可以將繪制圖片的代碼片段放在圖片對象的onload事件函數(shù)中，修改后的代碼如下：varimg=newImage();img.src="ballon.jpg";img.onload=function(){ctx.drawImage(img,0,0);}上述代碼表示必須等待圖片加載完畢才執(zhí)行圖像繪制方法。7.2.6繪制圖片3.縮放圖片圖片的大小可以在繪制時進行縮放。語法如下：drawImage(image,x,y,width,height)該方法比普通繪制圖片方法多出兩個參數(shù)width和height，分別用于指定縮放后圖片的寬度和高度，其默認(rèn)單位均為像素。7.2.6繪制圖片3.縮放圖片例如：varimg=newImage();img.src="ballon.jpg";img.onload=function(){ctx.drawImage(img,0,0,20,20);}上述代碼表示將從原點(0,0)坐標(biāo)開始繪制一張名稱為balloon.jpg的圖片，其尺寸縮放為寬和高均為20像素。7.2.6繪制圖片4.圖片切割繪制圖片時可以根據(jù)實際需要對原圖進行切割，只顯示指定的區(qū)域內(nèi)容。語法結(jié)構(gòu)如下：drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight)該方法有9個參數(shù)，其中image是需要切割的圖片對象；sx和sy表示將從原圖片的(sx,sy)坐標(biāo)位置進行切割；切割的矩形寬度為sWidth，高度為sHeight，其默認(rèn)單位均為像素。dx和dy表示切割后的圖片將顯示在畫布的（dx，dy）坐標(biāo)位置上，并且其寬度縮放為dWidth、高度縮放為dHeight。7.2.6繪制圖片4.圖片切割例如：varimg=newImage();img.src="ballon.jpg";img.onload=function(){ctx.drawImage(img,20,20,10,10,0,0,30,30);}上述代碼表示將一張名稱為balloon.jpg的圖片從(20,20)的坐標(biāo)點開始切割一塊10x10像素大小的方塊，將切割下來的方塊放置在畫布原點(0,0)上，并將該圖片放大至30x30像素的比例。7.2.6繪制圖片【例7-11】繪制圖片的簡單應(yīng)用

7.2.7繪制文本HTML5畫布API提供了兩種繪制文本的方法，fillText()方法用于繪制實心文本內(nèi)容，strokeText()方法用于為文本內(nèi)容描邊。7.2.7繪制文本繪制實心文本內(nèi)容語法結(jié)構(gòu)如下：繪制空心文本內(nèi)容語法結(jié)構(gòu)如下：fillText(text,x,y,maxWidth)strokeText(text,x,y,maxWidth)其中text表示文本內(nèi)容，實際填寫時需要在文本內(nèi)容的前后加上引號。x和y表示文本將繪制在(x,y)坐標(biāo)上。maxWidth指的是繪制文本的最大寬度，其默認(rèn)單位為像素。maxWidth不是必填內(nèi)容，根據(jù)實際需要可以省略。7.2.7繪制文本在繪制之前也可以使用context對象的font屬性自定義字體風(fēng)格，該屬性默認(rèn)的字體大小為10px、字體格式為sans-serif。該屬性的語法規(guī)則與CSS樣式中的font屬性完全相同，這里不再贅述?？梢灾匦略O(shè)置font屬性來改變字體樣式，例如：ctx.font="bold20pxserif";上述代碼表示字體設(shè)置為加粗、字大小為20像素、serif字體樣式。7.2.7繪制文本文本的默認(rèn)對齊方式是start，可以使用context對象中的textAlign屬性重新設(shè)置文本的對齊方式。textAlign屬性有5種屬性值，解釋如下：start：文本從指定位置開始，該屬性值為默認(rèn)值。end：文本從指定位置結(jié)束。left：文本左對齊。right：文本右對齊。center：文本居中顯示。7.2.7繪制文本【例7-12】繪制文本的簡單7.2.8顏色與樣式1.顏色設(shè)置2.顏色透明度3.顏色漸變4.圖案填充5.線條樣式6.陰影效果7.2.8顏色與樣式1.顏色設(shè)置繪圖時默認(rèn)的畫筆顏色為黑色，這意味著在畫布中繪制的輪廓顏色和圖形填充色在缺省屬性聲明時均為黑色。在CanvasRenderingContext2D接口中有兩個和顏色相關(guān)的重要屬性：strokeStyle和fillStyle，利用這兩個屬性可以重新定義線條顏色和圖形的填充色。7.2.8顏色與樣式1.顏色設(shè)置其基本語法格式如下：//設(shè)置圖形輪廓的顏色ctx.strokeStyle="顏色值";

//設(shè)置圖形的填充顏色ctx.fillStyle="顏色值";在這里顏色值需要使用CSS樣式中的聲明標(biāo)準(zhǔn)，可以是顏色名、RGB格式或者十六進制碼格式的完整或簡寫版。7.2.8顏色與樣式1.顏色設(shè)置以fillStyle屬性為例，設(shè)置圖形的填充色為紅色，有如下幾種寫法表達(dá)同樣的含義：ctx.fillStyle="red";//用顏色名設(shè)置紅色ctx.fillStyle="rgb(255,0,0)";//用十進制RGB顏色設(shè)置紅色ctx.fillStyle="#FF0000";//用十六進制碼設(shè)置紅色ctx.fillStyle="#F00";//用十六進制碼簡寫形式設(shè)置紅色7.2.8顏色與樣式1.顏色設(shè)置【例7-13】顏色設(shè)置的簡單應(yīng)用7.2.8顏色與樣式2.顏色透明度HTML5畫布可以使用半透明色作為圖形輪廓或填充顏色。其語法結(jié)構(gòu)如下：ctx.globalAplpha=透明度值;畫布中所有的圖形都被context對象中g(shù)lobalAlpha的屬性值影響透明度，有效值范圍是從0.0到1.0。其中0.0表示完全透明，1.0表示完全不透明。7.2.8顏色與樣式2.顏色透明度例如，設(shè)置透明度為0.5（半透明）寫法如下：ctx.globalAplpha=0.5;globalAlpha適合批量設(shè)置圖形顏色。7.2.8顏色與樣式2.顏色透明度如果需要為圖形單獨設(shè)置透明度，可以使用rgba方法。其語法結(jié)構(gòu)如下：rgba(red,green,blue,透明度值)和rgb方法類似，前三個參數(shù)用法完全一樣，只多出最后一個參數(shù)用于設(shè)置透明度。rgba的透明度有效值范圍和globalAlpha一樣，是從0.0（完全透明）到1.0（完全不透明）。7.2.8顏色與樣式2.顏色透明度當(dāng)透明度值處于1.0時，效果和rgb設(shè)置的顏色完全一致。例如：rgba(255,0,0,1)等同于rgb(255,0,0)7.2.8顏色與樣式2.顏色透明度【例7-14】透明度設(shè)置的簡單7.2.8顏色與樣式3.顏色漸變在HTML5中，可以使用顏色漸變效果來設(shè)置圖形的輪廓或填充顏色，分為線性漸變與徑向漸變兩種。首先可以創(chuàng)建具有指定漸變區(qū)域的canvasGradient對象。7.2.8顏色與樣式3.顏色漸變創(chuàng)建線性漸變canvasGradient對象的語法格式如下：創(chuàng)建徑向漸變canvasGradient對象的語法格式如下：ctx.createLinearGradient(x1,y1,x2,y2);ctx.createRadialGradient(x1,y1,r1,x2,y2,r2);其中前三個參數(shù)表示漸變的初始位置是圓心在(x1,y1)上的半徑為r1的圓，后三個參數(shù)表示漸變的結(jié)束位置是圓心在(x2,y2)上的半徑為r2的圓。其中(x1,y1)表示漸變的初始位置坐標(biāo)，(x2,y2)表示漸變的結(jié)束位置坐標(biāo)。7.2.8顏色與樣式3.顏色漸變使用這兩種漸變方法創(chuàng)建canvasGradient對象后均可繼續(xù)使用addColorStop()方法為漸變效果定義顏色與漸變點。其語法格式如下：gradient.addColorStop(position,color);

其中position參數(shù)需要填寫一個0-1之間的數(shù)值，表示漸變點的相對位置。例如0.5表示在漸變區(qū)域的正中間。color參數(shù)需要填寫一個有效的顏色值，可參考CSS顏色標(biāo)準(zhǔn)的聲明方式。7.2.8顏色與樣式3.顏色漸變以上兩種方法所創(chuàng)建出來的顏色漸變效果均可當(dāng)作是一種特殊的顏色值直接賦值給fillStyle屬性。例如：//創(chuàng)建線性漸變varlinear=ctx.createLinearGradient(0,0,150,150);linear.addColorStop(0,"rgb(0,0,255)");linear.addColorStop(1,"rgb(255,0,0)");

//畫圖形ctx.fillStyle=linear;ctx.fillRect(0,0,150,150);該代碼表示創(chuàng)建了一個寬高均為150像素的矩形，其左上角頂點在原點(0,0)的位置。其填充顏色不是一般的純色，而是由左上角點(0,0)開始填充藍(lán)色向右下角點(150,150)漸變?yōu)榧t色的填充效果。7.2.8顏色與樣式3.顏色漸變【例7-15】顏色漸變的簡單應(yīng)用7.2.8顏色與樣式4.圖案填充在CanvasRenderingContext2D接口中的createPattern()方法可以將外部圖片素材用于填充畫布上繪制的圖形。其語法結(jié)構(gòu)如下：createPattern(image,type)其中image必須是一個Image對象或canvas對象的引用。type用于設(shè)置圖片填充時是否重復(fù)，只能為以下4個值之一：repeat、repeat-x、repeat-y和no-repeat。將該方法的返回值賦值給fillStyle屬性即可。7.2.8顏色與樣式4.圖案填充和繪制圖片一樣，最好將相關(guān)代碼寫到圖像的onload事件函數(shù)中，以免圖片尚未加載完成無法顯示正確的效果。例如：varimg=newImage();img.src="ballon.jpg";img.onload=function(){varpattern=ctx.createPattern(img,"repeat");ctx.fillStyle=pattern;ctx.fillRect(0,0,100,100);}7.2.8顏色與樣式4.圖案填充【例7-16】圖案填充的簡單應(yīng)用7.2.8顏色與樣式5.線條樣式context對象中帶有一系列屬性可以自定義線條效果，包括線條的粗細(xì)、顏色和拐角接連處的形狀。在CanvasRenderingContext2D接口中有一系列屬性可用于設(shè)置線條樣式，如表7-2所示。7.2.8顏色與樣式5.線條樣式其中l(wèi)ineJoin屬性表示線段之間連接處的拐角樣式，有三種屬性解釋如下：miter：線段連接處的拐角為尖角，該屬性值為默認(rèn)值；round：線段連接處的拐角為圓形；bevel：線段連接處的拐角為平角。7.2.8顏色與樣式5.線條樣式lineCap屬性表示線段兩邊頂端的形狀，有三種屬性值解釋如下：butt：線段的末端以方形結(jié)束，該屬性值為默認(rèn)值；round：線段的末端以半圓形凸起結(jié)束；square：線段的末端加了一個方形，該方形的寬度與線段同寬，高度為寬度的一半。7.2.8顏色與樣式5.線條樣式setLineDash(segments)方法可以將線條設(shè)置為虛線，其中參數(shù)segments位置需要填入一個包含了交替繪制線段與間隔長度的Array數(shù)組。例如：ctx.setLineDash([10,5]);上述代碼表示設(shè)置線條樣式為10像素的線段與5像素的間隔交替出現(xiàn)形成虛線。7.2.8顏色與樣式5.線條樣式將這些屬性組合使用可以定義不同樣式的線段。例如，定義寬度為4像素、拐角連接處為弧形的紅色線段，相關(guān)JavaScript代碼如下：ctx.lineWidth=4;ctx.lineJoin="round";ctx.strokeStyle="red";當(dāng)前使用了英文單詞red來定義strokeStyle屬性為紅色，也可以使用十六進制碼#FF0000或者rbg(255,0,0)等方式表達(dá)同樣的效果。7.2.8顏色與樣式5.線條樣式【例7-17】線條樣式的簡單應(yīng)用

7.2.8顏色與樣式6.陰影效果在CanvasRenderingContext2D接口中具有4個屬性可以為畫布中的圖形或文本設(shè)置陰影效果。如表7-3所示。7.2.8顏色與樣式6.陰影效果【例7-18】陰影效果的簡單應(yīng)用

7.2.9保存和恢復(fù)在HTML5畫布中，save()和restore()方法是繪制復(fù)雜圖形的快捷方式，用于記錄或恢復(fù)畫布的繪畫狀態(tài)。在繪制復(fù)雜圖形時有可能臨時需要進行多個屬性的設(shè)置更改（例如畫筆的粗細(xì)、填充顏色等效果），在繪制完成后又要重新恢復(fù)初始設(shè)置進行后續(xù)的操作。7.2.9保存和恢復(fù)例如，先更改填充色為黃色、輪廓顏色為紅色，在繪制圖形之后還原初始的畫筆狀態(tài)。代碼如下：//更改繪畫狀態(tài)ctx.fillStyle="yellow";//設(shè)置填充色為黃色ctx.strokeStyle="red";//設(shè)置描邊輪廓為紅色

//繪制圖形ctx.fillRect(0,0,100,100);

//還原初始繪畫狀態(tài)ctx.fillStyle="black";//設(shè)置填充色為黑色ctx.strokeStyle="black";//設(shè)置描邊輪廓為黑色由此可見，每次還原初始繪畫狀態(tài)都必須重新設(shè)置所有被更改的參數(shù)。如果多次出現(xiàn)這種情況，則重復(fù)繪畫狀態(tài)設(shè)置會造成大量的代碼冗余。7.2.9保存和恢復(fù)因此可以使用save()和restore()方法化簡這部分代碼。在需要更改繪制狀態(tài)的設(shè)置前使用save()方法先記錄當(dāng)前的設(shè)置，然后再更改需要的設(shè)置進行特殊部分的繪制，繪制結(jié)束后只需要使用restore()方法即可迅速恢復(fù)記錄的狀態(tài)。7.2.9保存和恢復(fù)上述代碼修改后如下：//保存當(dāng)前繪畫狀態(tài)ctx.save();

//更改繪畫狀態(tài)ctx.fillStyle="yellow";//設(shè)置填充色為黃色ctx.strokeStyle="red";//設(shè)置描邊輪廓為紅色

//繪制圖形ctx.fillRect(0,0,100,100);

//還原初始繪畫狀態(tài)ctx.restore();還可以多次使用save()方法保存不同的繪畫狀態(tài)，每次使用save()方法都會將當(dāng)前狀態(tài)推送到棧中保存。當(dāng)使用restore()方法則從棧中取出最近一次的繪畫狀態(tài)對畫布進行恢復(fù)設(shè)置。7.2.9保存和恢復(fù)【例7-19】保存和恢復(fù)的簡單應(yīng)用

7.2.10變形在HTML5畫布中有四種方法可以對圖像進行變形處理：移動translate：移動圖形到新的位置，圖形的大小形狀不變。旋轉(zhuǎn)rotate：以畫布的原點(0,0)坐標(biāo)為參照點進行圖形旋轉(zhuǎn)，圖形的大小形狀不變?？s放scale：對圖形進行指定比例的放大或縮小，圖形的位置不變。矩陣變形transform：使用數(shù)學(xué)矩陣多次疊加形成更復(fù)雜的變化。7.2.10變形1.移動translate在HTML5畫布中可以使用translate()方法對圖形進行移動處理。其基本格式如下：translate(x,y)

其中參數(shù)x指的是在水平方向x軸上的偏移量，參數(shù)y指的是在垂直方向y軸上的偏移量。參數(shù)為正數(shù)表示按照坐標(biāo)系的正方向移動，參數(shù)為負(fù)數(shù)表示沿著坐標(biāo)系的相反方向移動。7.2.10變形1.移動translate需要注意的是，每一次調(diào)用translate()方法都是在上一個translate()方法的基礎(chǔ)上繼續(xù)移動原點的位置。例如：ctx.translate(100,0);//將原點水平向右移動100像素，目前位置在(100,0)ctx.translate(100,0);//將原點繼續(xù)水平向右移動100像素，目前位置在(200,0)ctx.translate(0,100);//將原點繼續(xù)垂直向下移動100像素，目前位置在(200,100)因此每次都需要考慮當(dāng)前原點的位置才能進行正確的移動。如果不希望translate()方法影響每一次移動，可以使用save()與restore()方法恢復(fù)原狀。7.2.10變形1.移動translate【例7-20】移動效果的簡單應(yīng)用

7.2.10變形2.旋轉(zhuǎn)rotate在HTML5畫布中可以使用rotate()方法對圖形進行旋轉(zhuǎn)處理。其基本格式如下：rotate(angle)其中angle參數(shù)需要填入順時針旋轉(zhuǎn)的角度，需要換算成弧度單位。如果填入負(fù)值則可以逆時針旋轉(zhuǎn)。7.2.10變形2.旋轉(zhuǎn)rotate例如，需要逆時針旋轉(zhuǎn)90°的寫法如下：ctx.rotate(-Math.PI/2);默認(rèn)情況下，rotate()方法以畫布的原點(0,0)坐標(biāo)為參照點進行圖形旋轉(zhuǎn)，如果需要指定其他參照點，也可以事先使用translate()方法轉(zhuǎn)移參照點坐標(biāo)的位置。7.2.10變形2.旋轉(zhuǎn)rotate【例7-21】旋轉(zhuǎn)效果的簡單應(yīng)用

7.2.10變形3.縮放scale在HTML5畫布中可以使用scale()方法對圖形進行縮放處理。其基本格式如下：scale(x,y)其中參數(shù)x表示水平方向x軸的縮放倍數(shù)，參數(shù)y表示垂直方向y軸的縮放倍數(shù)，允許填入整數(shù)或浮點數(shù)，但必須為正數(shù)。填入數(shù)值1.0時為正常顯示，無縮放效果。7.2.10變形3.縮放scale例如：ctx.scale(0.5,2);上述代碼表示寬度縮小為原先的0.5倍，高度放大為原先的2倍。對一個寬100像素、高50像素的矩形使用該方法表示寬度變?yōu)?0像素，高度變?yōu)?00像素。7.2.10變形3.縮放scale【例7-22】縮放效果的簡單應(yīng)用7.2.10變形4.矩陣變形transform在HTML5畫布中transform()方法使用矩陣多次疊加形成更復(fù)雜的變化，也可以通過合適的參數(shù)實現(xiàn)之前的移動、旋轉(zhuǎn)和縮放效果。其基本格式如下：transform(m11,m12,m21,m22,dx,dy)參數(shù)解釋如下：m11：水平縮放。m12：水平傾斜。m21：垂直傾斜。m22：垂直縮放。dx：水平移動。dy：垂直移動。7.2.10變形4.矩陣變形transform【例7-23】矩陣變形的簡單應(yīng)用7.2.11剪裁在HTML5畫布中可以使用clip()方法對圖形進行剪裁處理。該方法一旦執(zhí)行，前面的繪制圖形代碼將起到剪裁畫布的作用，超過該圖形所覆蓋部分的所有其他區(qū)域都將無法進行繪制。7.2.11剪裁例如：//創(chuàng)建剪裁的區(qū)域ctx.rect(0,0,100,100);//剪裁畫布ctx.clip();上述代碼表示將畫布剪裁為左上角在原點、寬和高均為100像素的矩形大小。剪裁是不可逆的，下一次使用clip()方法也只能在當(dāng)前的保留區(qū)域繼續(xù)進行剪裁。7.2.11剪裁如果需要剪裁區(qū)域為圓形，可以使用ctx.arc()方法。例如：//開始繪制路徑ctx.beginPath();//創(chuàng)建圓弧剪裁的區(qū)域ctx.arc(100,100,100,0,Math.PI*2,true);//剪裁畫布ctx.clip();//結(jié)束路徑繪制ctx.closePath();7.2.11剪裁【例7-24】剪裁效果的簡單應(yīng)用7.3實驗案例——手繪時鐘的設(shè)計與實現(xiàn)功能要求：不依賴于任何圖片素材，完全基于HTML5畫布API繪制時鐘，并實現(xiàn)每秒更新的動態(tài)效果。效果圖如圖所示。本章小結(jié)本章小結(jié)HTML5畫布API可用于在頁面上繪制自定義的圖案或圖片內(nèi)容。畫布的坐標(biāo)系與數(shù)學(xué)坐標(biāo)軸在水平方向上呈鏡像對稱效果，其中畫布左上角的點為原點(0,0)。畫布可以使用<canvas>標(biāo)簽進行創(chuàng)建，并配合JavaScript代碼實現(xiàn)圖像繪制。HTML5畫布API可以繪制線段、矩形、圖片和文本內(nèi)容。HTML5畫布API可以自定義畫筆的樣式與顏色，從而繪制出指定的線條與填充顏色效果。使用保存save()與恢復(fù)restore()方法可以快速保存或恢復(fù)畫布與畫筆的狀態(tài)；通過變形與剪裁，HTML5畫布API還可以實現(xiàn)更多圖像效果。Thankyou！第8章HTML5媒體API主講人：XX老師本章學(xué)習(xí)目標(biāo)理解音頻與視頻的概念；理解HTML5音頻與視頻的作用；熟悉HTML5音頻和視頻支持的媒體文件格式；掌握檢測瀏覽器是否支持HTML5媒體的方法；掌握HTML5中<audio>和<video>標(biāo)簽的常見用法；目錄8.1HTML5媒體API概述8.2主流瀏覽器支持情況一覽8.3HTML5音頻的應(yīng)用8.4HTML5視頻的應(yīng)用8.5HTML5媒體API其他通用功能8.1.1HTML5音頻和視頻8.1.2HTML5媒體支持的格式8.1HTML5媒體API概述8.1.1HTML5音頻和視頻在HTML5之前，音頻和視頻通常是在瀏覽器上使用插件進行播放的，比如使用Flash播放器。但是這些插件不是所有瀏覽器都可以支持的，例如蘋果公司的iOS系統(tǒng)、MacOS系統(tǒng)等使用的主流瀏覽器為Safari瀏覽器，該瀏覽器就無法支持flash插件。HTML5媒體API提供了一種用元素標(biāo)簽來包含音頻和視頻的標(biāo)準(zhǔn)，可以做到在無需任何插件的情況下直接播放媒體文件，并通過一系列屬性規(guī)定媒體文件的來源、循環(huán)方式和是否自動播放等。8.1.2HTML5媒體支持的格式HTML5媒體支持的音頻/視頻文件格式主要有MP3、MPEG-4、Wav、Ogg和WebM。8.1.2HTML5媒體支持的格式MP3MP3全稱為MPEG-1AudioLayer3，是由動態(tài)圖像專家組（MovingPictureExpertsGroup，MPEG）制定的一套用于音頻的混合壓縮技術(shù)。其優(yōu)點是壓縮率高，可達(dá)到10:1-12:1左右，適用于網(wǎng)絡(luò)傳播。MPEG-4MPEG-4是一套用于音頻、視頻新的壓縮編碼標(biāo)準(zhǔn)，通常媒體文件的后綴名是.mp4。和MP3一樣，MPEG-4由動態(tài)圖像專家組（MPEG）制定的。MPEG-4于1998年11月被批準(zhǔn)為正式標(biāo)準(zhǔn)，編號是ISO/IEC14496。8.1.2HTML5媒體支持的格式WavWav格式是一項微軟和IBM定制的音頻文件格式標(biāo)準(zhǔn)，用于在PC端存儲音頻流，通常該格式的媒體文件后綴名是.wav。Wav格式符合資源交換檔案標(biāo)準(zhǔn)（ResourceInterchangeFileFormat，RIFF）標(biāo)準(zhǔn)。該格式主要用在Windows系統(tǒng)上，屬于無損音樂格式，因此相對來說文件較大。8.1.2HTML5媒體支持的格式OggOgg是一種完全免費開放的媒體容器格式，由Xiph.Org組織進行維護，通常媒體文件的后綴名是.ogg。Ogg來源于游戲術(shù)語“ogging”，該術(shù)語來源于一款發(fā)布于1988年的免費開源網(wǎng)絡(luò)游戲Netrek，這也是最早的網(wǎng)絡(luò)團隊游戲之一。Ogg容器格式擁有對于高質(zhì)量多媒體的處理能力，包含一系列獨立的流媒體如視頻、音頻、元數(shù)據(jù)、文本等。在Ogg多媒體框架中包含由Theora格式提供的視頻層以及Vorbis格式和Opus格式提供的音頻層。8.1.2HTML5媒體支持的格式WebMWebM是由Google發(fā)行的一種完全免費開放的視頻文件格式，通常媒體文件的后綴名為.webm。WebM格式是基于Matroska容器（常見為后綴名為.mkv格式的文件）改造開發(fā)的新標(biāo)準(zhǔn)。WebM最初支持VP8視頻和Vorbis音頻解碼器，2013年更新后支持VP9視頻和Opus音頻解碼器。WebM標(biāo)準(zhǔn)是于2010年GoogleI/O大會上發(fā)布，支持Firefox、Opera和Chrome瀏覽器。8.2.1對HTML5音頻的支持情況8.2.2對HTML5視頻的支持情況8.2主流瀏覽器支持情況一覽8.2.1對HTML5音頻的支持情況目前HTML5支持的常用音頻格式有三種：MP3格式：媒體文件的后綴名為.mp3；Ogg格式：媒體文件的后綴名為.ogg；Wav格式：媒體文件的后綴名為.wav。8.2.1對HTML5音頻的支持情況音頻格式EdgeFirefoxChromeSafariOperaMP3支持不支持支持支持不支持Ogg支持支持支持不支持支持Wav支持支持不支持支持支持注：在開發(fā)過程中，如果無法明確用戶使用的瀏覽器類型則需要起碼準(zhǔn)備兩種音頻格式進行備選。8.2.2對HTML5視頻的支持情況目前HTML5支持的常用視頻格式有三種：MPEG4格式：帶有H.264視頻編碼和AAC音頻編碼，媒體文件的后綴名為.mp4；Ogg格式：帶有Theora視頻編碼和Vorbis音頻編碼，媒體文件的后綴名為.ogg；WebM格式：帶有VP8視頻編碼和Vorbis音頻編碼，媒體文件的后綴名為.webm。8.2.2對HTML5視頻的支持情況注：在開發(fā)過程中，如果無法明確用戶使用的瀏覽器類型則需要起碼準(zhǔn)備兩種視頻格式進行備選。視頻格式EdgeFirefoxChromeSafariOperaMPEG4支持支持支持支持支持Ogg不支持支持支持不支持支持WebM不支持支持支持不支持支持8.3.1HTML5音頻的基本格式8.3.2檢查瀏覽器支持情況8.3.3音頻來源多樣性8.3.4自定義音頻控制8.3HTML5音頻的應(yīng)用8.3.1HTML5音頻的基本格式HTML5提供了一種使用<audio>和</audio>標(biāo)簽來顯示音頻的標(biāo)準(zhǔn)方法。8.3.1HTML5音頻的基本格式HTML5音頻所使用的<audio>標(biāo)簽的基本語法結(jié)構(gòu)如下：<audiosrc="音頻文件的URL"controls></audio>其中src屬性可以是音頻文件的URL地址或本地文件路徑；controls屬性用于添加音樂播放器的播放/暫停按鈕以及聲音大小調(diào)節(jié)的控件，標(biāo)準(zhǔn)寫法為controls=”controls”，也可以直接簡寫成controls，作用完全相同。8.3.1HTML5音頻的基本格式例如：<audiosrc="song.mp3"controls></audio>8.3.1HTML5音頻的基本格式【例8-1】音頻標(biāo)簽<audio>的簡單應(yīng)用

8.3.1HTML5音頻的基本格式HTML5音頻API的<audio>標(biāo)簽有一系列屬性用于對音頻文件的播放進行設(shè)置，如表8-3所示。8.3.2檢查瀏覽器支持情況使用<audio>標(biāo)簽檢測使用JavaScript檢測8.3.2檢查瀏覽器支持情況1.使用<audio>標(biāo)簽檢測可以直接在<audio>首尾標(biāo)簽之間插入提示語句用于提示瀏覽器不支持的情況。在不支持<audio>標(biāo)簽的瀏覽器中會直接顯示出該提示語句，若瀏覽器支持該標(biāo)簽則不會顯示此提示語句。8.3.2檢查瀏覽器支持情況1.使用<audio>標(biāo)簽檢測【例8-2】使用<audio>標(biāo)簽檢測瀏覽器支持情況

8.3.2檢查瀏覽器支持情況2.使用JavaScript檢測除了直接使用<audio>標(biāo)簽提示瀏覽器對HTML5音頻的支持情況外，還可以使用JavaScript語句檢測瀏覽器是否支持HTML5音頻。其原理是利用JavaScript的document.creatElement(‘標(biāo)簽名稱’)語句動態(tài)創(chuàng)建<audio>標(biāo)簽，然后檢測<audio>元素包含的canPlayType函數(shù)是否存在。8.3.2檢查瀏覽器支持情況2.使用JavaScript檢測varsupportAudio=!!document.creatElement(‘a(chǎn)udio’).canPlayType;前綴的雙感嘆號（?。。┯糜趯z測結(jié)果轉(zhuǎn)換為布爾值（boolean）類型，以此判斷<audio>元素是否可以被真的創(chuàng)建出來，如果返回值為true則說明當(dāng)前瀏覽器支持HTML5音頻，否則說明當(dāng)前瀏覽器不支持<audio>標(biāo)簽。8.3.2檢查瀏覽器支持情況2.使用JavaScript檢測【例8-3】檢測瀏覽器對HTML5音頻的支持情況8.3.3音頻來源多樣性由于不同的瀏覽器對支持的音頻格式不一樣，可以在<audio>元素中使用<source>標(biāo)簽指定多個音頻文件，為不同的瀏覽器提供可支持的編碼格式。瀏覽器會按照先后順序使用第一個可識別的格式。8.3.3音頻來源多樣性例如：<audiocontrols><sourcesrc="music/song.ogg"><sourcesrc="music/song.mp3">對不起，您的瀏覽器不支持HTML5音頻API。</audio>在本例中瀏覽器會先判斷音頻是否支持.ogg格式，如果支持就會直接播放song.ogg文件，否則會繼續(xù)判斷是否支持.mp3格式，支持則播放song.mp3。如果依次判斷下去沒有任何文件格式可以被執(zhí)行，則會返回給<audio>標(biāo)簽一個錯誤事件。8.3.3音頻來源多樣性【例8-4】音頻來源的多樣性8.3.4自定義音頻控制如果不想在網(wǎng)頁上顯示<audio>標(biāo)簽自帶的播放/暫停按鈕以及音量調(diào)節(jié)等控件（例如希望作為網(wǎng)頁的背景音樂），可以不添加其中的controls屬性，重新用JavaScript對音頻的播放進行控制。8.3.4自定義音頻控制【例8-5】自定義音頻控制按鈕8.4.1HTML5視頻的基本格式8.4.2檢查瀏覽器支持情況8.4.3視頻來源多樣性8.4.4自定義視頻控制8.4HTML5視頻的應(yīng)用8.4.1HTML5視頻的基本格式HTML5提供了一種使用<video>和</video>標(biāo)簽來顯示視頻的標(biāo)準(zhǔn)方法8.4.1HTML5視頻的基本格式HTML5視頻所使用的<video>標(biāo)簽的基本語法結(jié)構(gòu)如下：<videosrc="視頻文件的URL"controls></video>其中src屬性可以是視頻文件的URL地址或本地文件路徑。controls屬性用于添加音樂播放器的播放和暫停按鈕以及聲音大小調(diào)節(jié)的控件。8.4.1HTML5視頻的基本格式例如：<videosrc="video/art.mp4"controls></video>上述代碼表示視頻來源為video目錄下的art.mp4視頻文件，并且顯示音樂播放器的播放、暫停按鈕以及聲音大小調(diào)節(jié)等控件。8.4.1HTML5視頻的基本格式【例8-6】視頻標(biāo)簽<video>的簡單應(yīng)用8.4.1HTML5視頻的基本格式8.4.2檢查瀏覽器支持情況1.使用<video>標(biāo)簽檢測2.使用JavaScript檢測8.4.2檢查瀏覽器支持情況1.使用<video>標(biāo)簽檢測和使用<audio>標(biāo)簽檢查瀏覽器支持情況的原理一樣，也可以直接在<video>和</video>標(biāo)簽之間插入提示語句用于檢查瀏覽器支持情況。在不支持<video>標(biāo)簽的瀏覽器中會直接顯示該提示語句，若瀏覽器支持該標(biāo)簽則不會顯示此提示語句。8.4.2檢查瀏覽器支持情況1.使用<video>標(biāo)簽檢測【例8-7】使用<video>標(biāo)簽檢測瀏覽器支持情況

8.4.2檢查瀏覽器支持情況2.使用JavaScript檢測和檢測瀏覽器是否支持HTML5音頻的原理類似，也可以使用同樣類型的JavaScript語句檢測瀏覽器是否支持HTML5視頻。用JavaScript的document.creatElement(‘標(biāo)簽名稱’)語句動態(tài)創(chuàng)建<video>標(biāo)簽，然后檢測<video>元素包含的canPlayType函數(shù)是否存在。8.4.2檢查瀏覽器支持情況2.使用JavaScript檢測代碼如下：varsupportVideo=!!document.creatElement(‘video’).canPlayType;前綴的雙感嘆號（?。。┯糜趯z測結(jié)果轉(zhuǎn)換為布爾值（boolean）類型，以此判斷<video>元素是否可以被創(chuàng)建出來，如果返回值為true則說明當(dāng)前瀏覽器支持HTML5視頻，否則說明當(dāng)前瀏覽器不支持<video>標(biāo)簽。8.4.2檢查瀏覽器支持情況2.使用JavaScript檢測【例8-8】檢測瀏覽器對HTML5視頻的支持情況8.4.3視頻來源多樣性由于不同的瀏覽器對支持的視頻格式不一樣，可以在<video>元素中使用<source>標(biāo)簽指定多個視頻文件，為不同的瀏覽器提供可支持的編碼格式。瀏覽器會按照先后順序使用第一個可識別的格式。8.4.3視頻來源多樣性例如：<videocontrols="controls"><sourcesrc="video/song.ogg"><sourcesrc="video/song.mp4">對不起，您的瀏覽器不支持HTML5視頻API。</video>8.4.3視頻來源多樣性如果能明確視頻文件所需視頻解碼器的值，也可以在<source>標(biāo)簽的type屬性中指定，這樣可以幫助瀏覽器更有效率地做出正確的判斷。例如：<videocontrols="controls"><sourcesrc="video/song.ogg"type=’video/ogg;codec="dirac,speex"’><sourcesrc="video/song.mp4"type=’video/mp4;codecs="avc1.42E01E,mp4a.40.2"’>對不起，您的瀏覽器不支持HTML5視頻API。</video>8.4.3視頻來源多樣性【例8-9】視頻來源的多樣性8.4.4自定義視頻控制

如果不想使用<video>標(biāo)簽自帶的播放/暫停按鈕等控件，同樣也可以禁用其中的controls屬性，用JavaScript對視頻的播放進行控制。

視頻播放時默認(rèn)的畫面大小是視頻源文件的畫面尺寸，如果需要更改也可以為<video>標(biāo)簽添加width（寬度）和height（高度）屬性放大或縮小視頻畫面。8.4.4自定義視頻控制【例8-10】自定義視頻控制按鈕8.4.4自定義視頻控制【例8-10】自定義視頻控制按鈕cont.8.5.1標(biāo)記媒體播放時間范圍8.5.2跳轉(zhuǎn)媒體播放時間點8.5.3獲取媒體播放時間8.5.4終止媒體文件的下載8.5.5使用Flash播放器8.5HTML5媒體API其他通用功能8.5.1標(biāo)記媒體播放時間范圍在為<audio>標(biāo)簽或<video>標(biāo)簽設(shè)置src屬性從而指定播放音頻或視頻來源時，可以加入一些額外的信息來指定需要播放的時間段。8.5.1標(biāo)記媒體播放時間范圍具體語法格式如下：src="音頻或視頻的URL地址#t=[starttime][,endtime]"需要使用井號（#）標(biāo)志分割前面的媒體文件來源URL和后面的額外信息。其中starttime指的是指定音頻或視頻的開始播放時間，如果省略不寫則默認(rèn)開始時間是音頻或視頻的開頭；endtime指的是指定音頻或視頻的終止播放時間，如果省略不寫則默認(rèn)終止時間是音頻或視頻的結(jié)束。8.5.1標(biāo)記媒體播放時間范圍開始時間starttime和終止時間endtime均可以填入整數(shù)或浮點數(shù)類型的秒數(shù)，也可以寫成時:分:秒的格式。例如，表示指定的媒體文件從第8秒開始播放，到第25秒結(jié)束，相關(guān)代碼如下：src="video/art.mp4#t=8,25"8.5.1標(biāo)記媒體播放時間范圍表示指定的媒體文件從第8.5秒開始播放，到第20秒結(jié)束，相關(guān)代碼如下：src="video/art.mp4#t=8.5,20"8.5.1標(biāo)記媒體播放時間范圍表示指定的媒體文件從最開始播放，到第1小時50分鐘的時候結(jié)束，相關(guān)代碼如下：src="video/art.mp4#t=,01:50:00"8.5.1標(biāo)記媒體播放時間范圍表示指定的媒體文件從第20秒開始播放，一直播放到最后結(jié)束，相關(guān)代碼如下：src="video/art.mp4#t=20"8.5.1標(biāo)記媒體播放時間范圍【例8-11】指定媒體文件的播放時間8.5.2跳轉(zhuǎn)媒體播放時間點HTML5媒體API允許媒體內(nèi)容在播放過程中直接跳轉(zhuǎn)到指定的時間點，可以通過設(shè)置<audio>或<video>標(biāo)簽的currentTime屬性值（單位：秒）來完成。8.5.2跳轉(zhuǎn)媒體播放時間點寫法如下：//獲取媒體元素對象varmediaFile=document.getElementById("media");

//設(shè)置currentTime屬性值，例如需要跳轉(zhuǎn)到第200秒。mediaFile.currentTime=200;8.5.2跳轉(zhuǎn)媒體播放時間點【例8-12】媒體文件播放時間點的跳轉(zhuǎn)8.5.3獲取媒體播放時間HTML5媒體API允許獲取媒體播放允許的開始時間與結(jié)束時間，需要使用<audio>或<video>標(biāo)簽的seekable屬性。seekable屬性的start(index)方法可以用于獲取媒體播放的開始時間，end(index)方法用于獲取媒體播放的結(jié)束時間，其中index表示媒體對象的來源序號，默認(rèn)只有一個的情況填數(shù)字0。這兩個方法的返回值均為時間單位秒。8.5.3獲取媒體播放時間獲取媒體的開始時間寫法如下：//獲取媒體元素對象varmediaFile=document.getElementById("media");

//獲取媒體播放的開始時間（單位：秒）mediaFile.seekable.start(0);8.5.3獲取媒體播放時間獲取媒體的結(jié)束時間寫法如下：//獲取媒體元素對象varmediaFile=document.getElementById("media");

//獲取媒體播放的結(jié)束時間（單位：秒）mediaFile.seekable.end(0);8.5.3獲取媒體播放時間HTML5媒體API同時也允許獲取媒體目前播放到的時間點，使用的是<audio>或<video>標(biāo)簽的played屬性，該屬性中的end(index)方法可以獲取單位為秒的當(dāng)前播放時間節(jié)點。獲取媒體當(dāng)前播放的秒數(shù)寫法如下：//獲取媒體元素對象varmediaFile=document.getElementById("media");

//獲取媒體當(dāng)前播放的秒數(shù)mediaFile.played.end(0);8.5.3獲取媒體播放時間【例8-13】獲取當(dāng)前播放時間8.5.4終止媒體文件的下載HTML5媒體API中的pause()方法可以用于暫停音頻或視頻的播放，但是即使處在暫停狀態(tài)，瀏覽器仍然會在后臺繼續(xù)下載媒體文件。解決方案是先暫停媒體文件的播放，然后將<audio>或<video>標(biāo)簽的src屬性去除或者設(shè)置為空。8.5.4終止媒體文件的下載寫法如下：//獲取媒體元素對象varmediaFile=document.getElementById("ID名稱");

//暫停當(dāng)前媒體文件的播放mediaFile.pause();

//去除src屬性mediaFile.removeAttribute("src");

//或者將src屬性設(shè)置為空值mediaFile.src="";8.5.4終止媒體文件的下載【例8-14】終止當(dāng)前媒體文件的下載8.6實驗案例——在線教學(xué)視頻的設(shè)計與實現(xiàn)背景介紹：現(xiàn)如今慕課（MassiveOpenOnlineCourses，MOOC）的概念正在興起，例如哈佛大學(xué)等世界級名校陸續(xù)設(shè)立了網(wǎng)絡(luò)學(xué)習(xí)平臺，用戶可以在線免費觀看和學(xué)習(xí)自己感興趣的課程。在我國，網(wǎng)易也正式推出了“全球名校視頻公開課項目”，內(nèi)容涵蓋了科技、藝術(shù)、金融、人文多個領(lǐng)域。8.6實驗案例——在線教學(xué)視頻的設(shè)計與實現(xiàn)功能要求：設(shè)計一款基于HTML5視頻技術(shù)的在線視頻播放頁面，包含視頻播放窗口和課程目錄列表。其中視頻播放窗口帶有相關(guān)控件，可以由用戶點擊切換全屏效果，以及隨時暫停和拖拽到指定時間繼續(xù)播放。課程目錄列表用于顯示當(dāng)前課程的大綱，用戶點擊列表中不同的選項可以使得課程跳轉(zhuǎn)到相應(yīng)的播放時間繼續(xù)進行播放。本章小結(jié)本章小結(jié)本章節(jié)介紹了HTML5媒體API中的兩個重要標(biāo)簽：<audio>標(biāo)簽和<video>標(biāo)簽。使用<audio>標(biāo)簽和<video>標(biāo)簽可以做到使瀏覽器直接播放音頻和視頻，無需安裝任何第三方插件。HTML5支持的音頻格式有：mp3、ogg、wav。HTML5視頻支持的媒體格式有：MPEG-4、Ogg、WebM。Thankyou！第09章HTML5Web存儲API主講人：XX老師本章學(xué)習(xí)目標(biāo)了解Web存儲的概念；了解本地存儲與會話存儲方式的區(qū)別；熟悉Storage接口；掌握存儲、讀取、遍歷和刪除數(shù)據(jù)的方法。目錄9.1Web存儲技術(shù)概述 9.2主流瀏覽器支持情況 9.3HTML5Web存儲API的應(yīng)用 9.1.1HTTPCookie存儲9.1.2HTTP5Web存儲9.1Web存儲技術(shù)概述9.1.1HTTPCookie存儲HTTPcookie由服務(wù)器端生成，將數(shù)據(jù)以“鍵-值”對(key-valuepairs)的形式發(fā)送給客戶端瀏覽器，瀏覽器將這些數(shù)據(jù)保存至指定目錄下的文本文件中，這樣在下一次訪問相同的網(wǎng)站時可以直接使用該cookie數(shù)據(jù)。HTTPcookie技術(shù)保存的數(shù)據(jù)名稱和值都可以自定義，常見用于判斷用戶是否已登陸網(wǎng)站，或者保存購物車中等待付款的商品信息等。9.1.1HTTPCookie存儲HTTPcookie最早設(shè)計出來是用于處理單個事務(wù)，存在以下問題，因此不太適用于存儲大量數(shù)據(jù)：cookie的存儲數(shù)據(jù)量?。阂粋€cookie最多只能存放4096B左右的數(shù)據(jù)，并且部分瀏覽器對cookie有數(shù)量限制，比如Firefox、Opera等每個域名只能保存50個cookie。cookie請求限制：每次瀏覽器與服務(wù)器進行請求時，cookie都會存放在請求頭部傳輸?shù)椒?wù)器端。如果請求頭部的大小過大，就會導(dǎo)致服務(wù)器無法處理。9.1.2HTTP5Web存儲HTML5Web存儲API和cookie存儲方式類似，也是將數(shù)據(jù)以“鍵-值”對(key-valuepairs)的形式持久存儲在Web客戶端。相比HTTPcookie而言，HTML5的Web存儲技術(shù)更適用于存儲大量數(shù)據(jù)，主流瀏覽器如Chrome、Firefox和Opera每個域名下可以存放5M的數(shù)據(jù)量，并且發(fā)生請求時不會帶上Web存儲的內(nèi)容。9.1.2HTTP5Web存儲HTML5提供了兩種客戶端存儲數(shù)據(jù)的方法：本地存儲（localStorage）與會話存儲（sessionStorage）。localStorage方法存儲的數(shù)據(jù)沒有時間限制，永久保存，并且數(shù)據(jù)可以被不同的網(wǎng)頁頁面共享使用。sessionStorage主要是針對一個session會話的數(shù)據(jù)存儲，只能在創(chuàng)建session的網(wǎng)頁中使用，當(dāng)用戶關(guān)閉瀏覽器窗口時，該數(shù)據(jù)將被刪除。9.2

主流瀏覽器支持情況瀏覽器EdgeFirefoxChromeSafariOpera支持情況8.0及以上3.0及以上3.0及以上4.0及以上10.5及以上9.3HTML5Web存儲API的應(yīng)用9.3.1檢查瀏覽器支持情況9.3.2Storage接口9.3.3localStoragevssessionStorage9.3.4存儲數(shù)據(jù)9.3HTML5Web存儲API的應(yīng)用9.3.5讀取指定數(shù)據(jù)9.3.6數(shù)據(jù)遍歷9.3.7刪除指定數(shù)據(jù)9.3.8清空所有數(shù)據(jù)9.3.1檢查瀏覽器支持情況在使用Web存儲API之前，需要首先確認(rèn)瀏覽器的支持情況。由于存儲的數(shù)據(jù)庫可以直接被HTMLDOM中的window對象訪問，故最簡單的檢測方法是使用JavaScript代碼分別檢查window.localStorage或windows.sessionStorage是否存在。如果不存在，則說明瀏覽器不支持Web存儲API。9.3.1檢查瀏覽器支持情況檢查瀏覽器是否支持localStorage的相關(guān)JavaScript代碼如下：if(window.localStorage){//瀏覽器支持Web存儲中的localStorage}else{//瀏覽器不支持Web存儲中的localStorage}9.3.1檢查瀏覽器支持情況檢查瀏覽器是否支持sessionStorage的相關(guān)JavaScript代碼和localStorage類似：if(window.sessionStorage){//瀏覽器支持Web存儲中的sessionStorage}else{//瀏覽器不支持Web存儲中的sessionStorage}9.3.1檢查瀏覽器支持情況【例9-1】檢測瀏覽器對HTML5Web存儲的支持情況

9.3.2Storage接口在HTML5Web存儲API中，使用Storage接口實現(xiàn)本地存儲（localStorage）或會話存儲（sessionStorage）數(shù)據(jù)的添加、修改、查詢或刪除。9.3.2Storage接口如果希望使用localStorage，需要在JavaScript中聲明window.localStorage方法，也可以省略window.前綴，直接寫為localStorage；如果需要使用的是sessionStorage，同樣可以在JavaScript中聲明window.sessionStorage方法，或省略window.前綴，直接寫為sessionStorage。9.3.2Storage接口Storage接口中包含了只讀屬性length，該屬性返回值為整數(shù)形式，表示當(dāng)前存儲對象中“鍵-值”對的總數(shù)量。9.3.2Storage接口方法名稱解釋key(n)用于返回數(shù)據(jù)中第n個值的名稱。如果n大于所有鍵值對的總數(shù)，則返回null值。getItem(key)用于返回指定鍵名稱