第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ū)域動(dòng)態(tài)繪制需要的內(nèi)容。目前所有的主流瀏覽器都提供了對于HTML5畫布API的支持。

7.1.2畫布坐標(biāo)畫布坐標(biāo)系中原點(diǎn)的位置在畫布矩形框的左上角，即(0,0)坐標(biāo)的位置。該坐標(biāo)系與數(shù)學(xué)坐標(biāo)系在水平方向上一致，垂直方向?yàn)殓R像對稱。也就是說畫布坐標(biāo)系的水平方向?yàn)閤軸，其正方向?yàn)橄蛴已由?；垂直方向?yàn)閥軸，其正方向?yàn)橄蛳卵由臁?/p>

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

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

7.2.2創(chuàng)建畫布在HTML5中創(chuàng)建畫布需要使用<canvas>元素，該元素的首尾標(biāo)簽<canvas>和</canvas>可以創(chuàng)建出一個(gè)默認(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ìn)行繪圖時(shí)可根據(jù)id找到需要繪圖的畫布，該名稱可自定義。width和height屬性分別表示畫布的寬度和高度，可填入長度數(shù)值，其默認(rèn)單位均為像素（px）。7.2.2創(chuàng)建畫布例如，創(chuàng)建一個(gè)id名稱為canvas01，寬度為300px，高度為200px的畫布，代碼如下：<canvasid="canvas01"width="300"height="200"></canvas>此時(shí)畫布會(huì)被創(chuàng)建在HTML5頁面上。由于畫布默認(rèn)是無邊框的，因此該畫布創(chuàng)建完成時(shí)是不可見的?？筛鶕?jù)實(shí)際開發(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)建一個(gè)帶有1像素寬的實(shí)線黑色邊框。7.2.2創(chuàng)建畫布【例7-2】第一個(gè)畫布頁面

7.2.3畫布繪制方法在HTML5中，<canvas>元素本身沒有繪圖能力，所有的繪圖代碼需要使用JavaScript完成。首先需要在JavaScript中創(chuàng)建context對象，然后用該對象動(dòng)態(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）是繪制圖形輪廓時(shí)畫筆留下的軌跡，也可以理解為畫筆畫出的像素點(diǎn)組成的線條。多個(gè)點(diǎn)形成線段或曲線，不同的線段或曲線相連接又形成了各種形狀效果。7.2.4繪制路徑繪制路徑主要有以下4種方法：beginPath()：用于新建一條路徑，也是圖形繪制的起點(diǎn)。closePath()：該方法用于閉合路徑。當(dāng)執(zhí)行該方法時(shí)會(huì)從畫筆的當(dāng)前坐標(biāo)位置繪制一條線段到初始坐標(biāo)位置來閉合圖形。stroke()：在圖形輪廓勾勒完畢后需要執(zhí)行該方法才能正式將路徑渲染到畫布上。fill()：可以使用該方法為圖形填充顏色，生成實(shí)心的圖形。7.2.4繪制路徑1.繪制線段在HTML5畫布中通過指定畫筆的初始坐標(biāo)位置和移動(dòng)到的新坐標(biāo)位置可以進(jìn)行線段的繪制。繪制線段主要有以下3種方法：moveTo(x,y):將當(dāng)前的畫筆直線移動(dòng)到指定的(x,y)坐標(biāo)上，并且不留下移動(dòng)痕跡。lineTo(x,y)：將當(dāng)前的畫筆直線移動(dòng)到指定的(x,y)坐標(biāo)上，并且畫出移動(dòng)痕跡。stroke()：在繪制完成后使用該方法可以在畫布上一次性渲染出效果。7.2.4繪制路徑1.繪制線段【例7-3】繪制線段的簡單應(yīng)用7.2.4繪制路徑2.繪制三角形三角形的繪制其實(shí)就是分別繪制三條線段，并且讓它們首尾相連組成形狀。在HTML5畫布中繪制三角形會(huì)用到上一小節(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個(gè)參數(shù)，解釋如下：x和y表示圓心在(x,y)坐標(biāo)位置上；radius為圓弧的半徑，默認(rèn)單位為像素；startAngle為開始的角度，endAngle為結(jié)束的角度；anticloclwise指的是繪制方向，可填入一個(gè)布爾值。其中true表示順時(shí)針繪制，false表示逆時(shí)針繪制。7.2.4繪制路徑3.繪制圓弧注意：arc()函數(shù)中的角度單位是弧度，使用時(shí)不可直接填入度數(shù)單位，需要進(jìn)行轉(zhuǎn)換。轉(zhuǎn)換公式如下：弧度=π/180x度數(shù)其中特殊弧度半圓(180°)轉(zhuǎn)換后弧度為π，圓(360°)轉(zhuǎn)換后弧度為2π。在開發(fā)過程中遇到這兩種情況可以免于換算，直接使用轉(zhuǎn)換結(jié)果。7.2.4繪制路徑3.繪制圓弧例如，繪制一個(gè)圓心在坐標(biāo)(100,100)、半徑為50像素的圓形：ctx.arc(100,100,50,0,Math.PI*2,true);由于圓形是旋轉(zhuǎn)360度的特殊圓弧，看不出順時(shí)針和逆時(shí)針的區(qū)別，因此用于規(guī)定繪制方向的最后一個(gè)參數(shù)填入true或false均可。7.2.4繪制路徑3.繪制圓弧【例7-5】繪制圓弧的簡單應(yīng)用7.2.4繪制路徑4.繪制曲線在HTML5畫布API中繪制曲線的原理來自于貝塞爾曲線（BezierCurve）。貝塞爾曲線又稱為貝茲曲線或者貝濟(jì)埃曲線，由法國數(shù)學(xué)家PierreBezier發(fā)明，是計(jì)算機(jī)圖形學(xué)中非常重要的參數(shù)曲線，也是應(yīng)用于2D圖形應(yīng)用程序的數(shù)學(xué)曲線。7.2.4繪制路徑4.繪制曲線貝塞爾曲線由曲線與節(jié)點(diǎn)組成，節(jié)點(diǎn)上有控制線和控制點(diǎn)可以拖動(dòng)，曲線在節(jié)點(diǎn)的控制下可以伸縮。一些矢量圖形軟件用其來精確繪制曲線，如AdobePhotoshop、AdobeIllustrator等。7.2.4繪制路徑4.繪制曲線貝塞爾曲線一般用來繪制較為復(fù)雜的規(guī)律圖形。根據(jù)控制點(diǎn)數(shù)量不同，分為二次貝塞爾曲線和三次貝塞爾曲線。二次貝塞爾曲線語法結(jié)構(gòu)如下：quadraticCurveTo(cp1x,cp1y,x,y)其中(cp1x,cp1y)為控制點(diǎn)的坐標(biāo)，(x,y)為結(jié)束點(diǎn)的坐標(biāo)。7.2.4繪制路徑4.繪制曲線三次貝塞爾曲線語法結(jié)構(gòu)如下：bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)其中(cp1x,cp1y)為控制點(diǎn)一的坐標(biāo)，(cp2x,cp2y)為控制點(diǎn)二的坐標(biāo)，(x,y)為結(jié)束點(diǎn)的坐標(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()方法繪制填充顏色的實(shí)心矩形，其語法結(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】繪制帶實(shí)心矩形的簡單應(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)建一個(gè)新的圖片對象。例如，裝載一張名稱為hello.png的圖片：varimg=newImage();img.src="hello.png";此時(shí)圖片只是指定了來源，暫時(shí)還未繪制在畫布上，因此看不到任何效果。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的圖片，并將其左上角放置在原點(diǎn)上。此時(shí)繪制的圖片尺寸與原圖一致。7.2.6繪制圖片2.繪制圖片有時(shí)由于圖片過大導(dǎo)致加載時(shí)間較長，在圖片還未加載完畢時(shí)就執(zhí)行了drawImage()方法可能導(dǎo)致圖片無法正常顯示。此時(shí)可以將繪制圖片的代碼片段放在圖片對象的onload事件函數(shù)中，修改后的代碼如下：varimg=newImage();img.src="ballon.jpg";img.onload=function(){ctx.drawImage(img,0,0);}上述代碼表示必須等待圖片加載完畢才執(zhí)行圖像繪制方法。7.2.6繪制圖片3.縮放圖片圖片的大小可以在繪制時(shí)進(jìn)行縮放。語法如下：drawImage(image,x,y,width,height)該方法比普通繪制圖片方法多出兩個(gè)參數(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);}上述代碼表示將從原點(diǎn)(0,0)坐標(biāo)開始繪制一張名稱為balloon.jpg的圖片，其尺寸縮放為寬和高均為20像素。7.2.6繪制圖片4.圖片切割繪制圖片時(shí)可以根據(jù)實(shí)際需要對原圖進(jìn)行切割，只顯示指定的區(qū)域內(nèi)容。語法結(jié)構(gòu)如下：drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight)該方法有9個(gè)參數(shù)，其中image是需要切割的圖片對象；sx和sy表示將從原圖片的(sx,sy)坐標(biāo)位置進(jìn)行切割；切割的矩形寬度為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)點(diǎn)開始切割一塊10x10像素大小的方塊，將切割下來的方塊放置在畫布原點(diǎn)(0,0)上，并將該圖片放大至30x30像素的比例。7.2.6繪制圖片【例7-11】繪制圖片的簡單應(yīng)用

7.2.7繪制文本HTML5畫布API提供了兩種繪制文本的方法，fillText()方法用于繪制實(shí)心文本內(nèi)容，strokeText()方法用于為文本內(nèi)容描邊。7.2.7繪制文本繪制實(shí)心文本內(nèi)容語法結(jié)構(gòu)如下：繪制空心文本內(nèi)容語法結(jié)構(gòu)如下：fillText(text,x,y,maxWidth)strokeText(text,x,y,maxWidth)其中text表示文本內(nèi)容，實(shí)際填寫時(shí)需要在文本內(nèi)容的前后加上引號(hào)。x和y表示文本將繪制在(x,y)坐標(biāo)上。maxWidth指的是繪制文本的最大寬度，其默認(rèn)單位為像素。maxWidth不是必填內(nèi)容，根據(jù)實(shí)際需要可以省略。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è)置繪圖時(shí)默認(rèn)的畫筆顏色為黑色，這意味著在畫布中繪制的輪廓顏色和圖形填充色在缺省屬性聲明時(shí)均為黑色。在CanvasRenderingContext2D接口中有兩個(gè)和顏色相關(guān)的重要屬性：strokeStyle和fillStyle，利用這兩個(gè)屬性可以重新定義線條顏色和圖形的填充色。7.2.8顏色與樣式1.顏色設(shè)置其基本語法格式如下：//設(shè)置圖形輪廓的顏色ctx.strokeStyle="顏色值";

//設(shè)置圖形的填充顏色ctx.fillStyle="顏色值";在這里顏色值需要使用CSS樣式中的聲明標(biāo)準(zhǔn)，可以是顏色名、RGB格式或者十六進(jìn)制碼格式的完整或簡寫版。7.2.8顏色與樣式1.顏色設(shè)置以fillStyle屬性為例，設(shè)置圖形的填充色為紅色，有如下幾種寫法表達(dá)同樣的含義：ctx.fillStyle="red";//用顏色名設(shè)置紅色ctx.fillStyle="rgb(255,0,0)";//用十進(jìn)制RGB顏色設(shè)置紅色ctx.fillStyle="#FF0000";//用十六進(jìn)制碼設(shè)置紅色ctx.fillStyle="#F00";//用十六進(jìn)制碼簡寫形式設(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.顏色透明度如果需要為圖形單獨(dú)設(shè)置透明度，可以使用rgba方法。其語法結(jié)構(gòu)如下：rgba(red,green,blue,透明度值)和rgb方法類似，前三個(gè)參數(shù)用法完全一樣，只多出最后一個(gè)參數(shù)用于設(shè)置透明度。rgba的透明度有效值范圍和globalAlpha一樣，是從0.0（完全透明）到1.0（完全不透明）。7.2.8顏色與樣式2.顏色透明度當(dāng)透明度值處于1.0時(shí)，效果和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);其中前三個(gè)參數(shù)表示漸變的初始位置是圓心在(x1,y1)上的半徑為r1的圓，后三個(gè)參數(shù)表示漸變的結(jié)束位置是圓心在(x2,y2)上的半徑為r2的圓。其中(x1,y1)表示漸變的初始位置坐標(biāo)，(x2,y2)表示漸變的結(jié)束位置坐標(biāo)。7.2.8顏色與樣式3.顏色漸變使用這兩種漸變方法創(chuàng)建canvasGradient對象后均可繼續(xù)使用addColorStop()方法為漸變效果定義顏色與漸變點(diǎn)。其語法格式如下：gradient.addColorStop(position,color);

其中position參數(shù)需要填寫一個(gè)0-1之間的數(shù)值，表示漸變點(diǎn)的相對位置。例如0.5表示在漸變區(qū)域的正中間。color參數(shù)需要填寫一個(gè)有效的顏色值，可參考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)建了一個(gè)寬高均為150像素的矩形，其左上角頂點(diǎn)在原點(diǎn)(0,0)的位置。其填充顏色不是一般的純色，而是由左上角點(diǎn)(0,0)開始填充藍(lán)色向右下角點(diǎ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必須是一個(gè)Image對象或canvas對象的引用。type用于設(shè)置圖片填充時(shí)是否重復(fù)，只能為以下4個(gè)值之一：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：線段的末端加了一個(gè)方形，該方形的寬度與線段同寬，高度為寬度的一半。7.2.8顏色與樣式5.線條樣式setLineDash(segments)方法可以將線條設(shè)置為虛線，其中參數(shù)segments位置需要填入一個(gè)包含了交替繪制線段與間隔長度的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屬性為紅色，也可以使用十六進(jìn)制碼#FF0000或者rbg(255,0,0)等方式表達(dá)同樣的效果。7.2.8顏色與樣式5.線條樣式【例7-17】線條樣式的簡單應(yīng)用

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

7.2.9保存和恢復(fù)在HTML5畫布中，save()和restore()方法是繪制復(fù)雜圖形的快捷方式，用于記錄或恢復(fù)畫布的繪畫狀態(tài)。在繪制復(fù)雜圖形時(shí)有可能臨時(shí)需要進(jìn)行多個(gè)屬性的設(shè)置更改（例如畫筆的粗細(xì)、填充顏色等效果），在繪制完成后又要重新恢復(fù)初始設(shè)置進(jìn)行后續(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è)置會(huì)造成大量的代碼冗余。7.2.9保存和恢復(fù)因此可以使用save()和restore()方法化簡這部分代碼。在需要更改繪制狀態(tài)的設(shè)置前使用save()方法先記錄當(dāng)前的設(shè)置，然后再更改需要的設(shè)置進(jìn)行特殊部分的繪制，繪制結(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()方法都會(huì)將當(dāng)前狀態(tài)推送到棧中保存。當(dāng)使用restore()方法則從棧中取出最近一次的繪畫狀態(tài)對畫布進(jìn)行恢復(fù)設(shè)置。7.2.9保存和恢復(fù)【例7-19】保存和恢復(fù)的簡單應(yīng)用

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

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

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

7.2.10變形3.縮放scale在HTML5畫布中可以使用scale()方法對圖形進(jìn)行縮放處理。其基本格式如下：scale(x,y)其中參數(shù)x表示水平方向x軸的縮放倍數(shù)，參數(shù)y表示垂直方向y軸的縮放倍數(shù)，允許填入整數(shù)或浮點(diǎn)數(shù)，但必須為正數(shù)。填入數(shù)值1.0時(shí)為正常顯示，無縮放效果。7.2.10變形3.縮放scale例如：ctx.scale(0.5,2);上述代碼表示寬度縮小為原先的0.5倍，高度放大為原先的2倍。對一個(gè)寬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ù)實(shí)現(xiàn)之前的移動(dòng)、旋轉(zhuǎn)和縮放效果。其基本格式如下：transform(m11,m12,m21,m22,dx,dy)參數(shù)解釋如下：m11：水平縮放。m12：水平傾斜。m21：垂直傾斜。m22：垂直縮放。dx：水平移動(dòng)。dy：垂直移動(dòng)。7.2.10變形4.矩陣變形transform【例7-23】矩陣變形的簡單應(yīng)用7.2.11剪裁在HTML5畫布中可以使用clip()方法對圖形進(jìn)行剪裁處理。該方法一旦執(zhí)行，前面的繪制圖形代碼將起到剪裁畫布的作用，超過該圖形所覆蓋部分的所有其他區(qū)域都將無法進(jìn)行繪制。7.2.11剪裁例如：//創(chuàng)建剪裁的區(qū)域ctx.rect(0,0,100,100);//剪裁畫布ctx.clip();上述代碼表示將畫布剪裁為左上角在原點(diǎn)、寬和高均為100像素的矩形大小。剪裁是不可逆的，下一次使用clip()方法也只能在當(dāng)前的保留區(qū)域繼續(xù)進(jìn)行剪裁。7.2.11剪裁如果需要剪裁區(qū)域?yàn)閳A形，可以使用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í)驗(yàn)案例——手繪時(shí)鐘的設(shè)計(jì)與實(shí)現(xiàn)功能要求：不依賴于任何圖片素材，完全基于HTML5畫布API繪制時(shí)鐘，并實(shí)現(xiàn)每秒更新的動(dòng)態(tài)效果。效果圖如圖所示。本章小結(jié)本章小結(jié)HTML5畫布API可用于在頁面上繪制自定義的圖案或圖片內(nèi)容。畫布的坐標(biāo)系與數(shù)學(xué)坐標(biāo)軸在水平方向上呈鏡像對稱效果，其中畫布左上角的點(diǎn)為原點(diǎn)(0,0)。畫布可以使用<canvas>標(biāo)簽進(jìn)行創(chuàng)建，并配合JavaScript代碼實(shí)現(xiàn)圖像繪制。HTML5畫布API可以繪制線段、矩形、圖片和文本內(nèi)容。HTML5畫布API可以自定義畫筆的樣式與顏色，從而繪制出指定的線條與填充顏色效果。使用保存save()與恢復(fù)restore()方法可以快速保存或恢復(fù)畫布與畫筆的狀態(tài)；通過變形與剪裁，HTML5畫布API還可以實(shí)現(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之前，音頻和視頻通常是在瀏覽器上使用插件進(jìn)行播放的，比如使用Flash播放器。但是這些插件不是所有瀏覽器都可以支持的，例如蘋果公司的iOS系統(tǒng)、MacOS系統(tǒng)等使用的主流瀏覽器為Safari瀏覽器，該瀏覽器就無法支持flash插件。HTML5媒體API提供了一種用元素標(biāo)簽來包含音頻和視頻的標(biāo)準(zhǔn)，可以做到在無需任何插件的情況下直接播放媒體文件，并通過一系列屬性規(guī)定媒體文件的來源、循環(huán)方式和是否自動(dòng)播放等。8.1.2HTML5媒體支持的格式HTML5媒體支持的音頻/視頻文件格式主要有MP3、MPEG-4、Wav、Ogg和WebM。8.1.2HTML5媒體支持的格式MP3MP3全稱為MPEG-1AudioLayer3，是由動(dòng)態(tài)圖像專家組（MovingPictureExpertsGroup，MPEG）制定的一套用于音頻的混合壓縮技術(shù)。其優(yōu)點(diǎn)是壓縮率高，可達(dá)到10:1-12:1左右，適用于網(wǎng)絡(luò)傳播。MPEG-4MPEG-4是一套用于音頻、視頻新的壓縮編碼標(biāo)準(zhǔn)，通常媒體文件的后綴名是.mp4。和MP3一樣，MPEG-4由動(dòng)態(tài)圖像專家組（MPEG）制定的。MPEG-4于1998年11月被批準(zhǔn)為正式標(biāo)準(zhǔn)，編號(hào)是ISO/IEC14496。8.1.2HTML5媒體支持的格式WavWav格式是一項(xiàng)微軟和IBM定制的音頻文件格式標(biāo)準(zhǔn)，用于在PC端存儲(chǔ)音頻流，通常該格式的媒體文件后綴名是.wav。Wav格式符合資源交換檔案標(biāo)準(zhǔn)（ResourceInterchangeFileFormat，RIFF）標(biāo)準(zhǔn)。該格式主要用在Windows系統(tǒng)上，屬于無損音樂格式，因此相對來說文件較大。8.1.2HTML5媒體支持的格式OggOgg是一種完全免費(fèi)開放的媒體容器格式，由Xiph.Org組織進(jìn)行維護(hù)，通常媒體文件的后綴名是.ogg。Ogg來源于游戲術(shù)語“ogging”，該術(shù)語來源于一款發(fā)布于1988年的免費(fèi)開源網(wǎng)絡(luò)游戲Netrek，這也是最早的網(wǎng)絡(luò)團(tuán)隊(duì)游戲之一。Ogg容器格式擁有對于高質(zhì)量多媒體的處理能力，包含一系列獨(dú)立的流媒體如視頻、音頻、元數(shù)據(jù)、文本等。在Ogg多媒體框架中包含由Theora格式提供的視頻層以及Vorbis格式和Opus格式提供的音頻層。8.1.2HTML5媒體支持的格式WebMWebM是由Google發(fā)行的一種完全免費(fèi)開放的視頻文件格式，通常媒體文件的后綴名為.webm。WebM格式是基于Matroska容器（常見為后綴名為.mkv格式的文件）改造開發(fā)的新標(biāo)準(zhǔn)。WebM最初支持VP8視頻和Vorbis音頻解碼器，2013年更新后支持VP9視頻和Opus音頻解碼器。WebM標(biāo)準(zhǔn)是于2010年GoogleI/O大會(huì)上發(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)備兩種音頻格式進(jì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)備兩種視頻格式進(jì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)簽有一系列屬性用于對音頻文件的播放進(jìn)行設(shè)置，如表8-3所示。8.3.2檢查瀏覽器支持情況使用<audio>標(biāo)簽檢測使用JavaScript檢測8.3.2檢查瀏覽器支持情況1.使用<audio>標(biāo)簽檢測可以直接在<audio>首尾標(biāo)簽之間插入提示語句用于提示瀏覽器不支持的情況。在不支持<audio>標(biāo)簽的瀏覽器中會(huì)直接顯示出該提示語句，若瀏覽器支持該標(biāo)簽則不會(huì)顯示此提示語句。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)簽名稱’)語句動(dòng)態(tài)創(chuàng)建<audio>標(biāo)簽，然后檢測<audio>元素包含的canPlayType函數(shù)是否存在。8.3.2檢查瀏覽器支持情況2.使用JavaScript檢測varsupportAudio=!!document.creatElement(‘a(chǎn)udio’).canPlayType;前綴的雙感嘆號(hào)（?。。┯糜趯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)簽指定多個(gè)音頻文件，為不同的瀏覽器提供可支持的編碼格式。瀏覽器會(huì)按照先后順序使用第一個(gè)可識(shí)別的格式。8.3.3音頻來源多樣性例如：<audiocontrols><sourcesrc="music/song.ogg"><sourcesrc="music/song.mp3">對不起，您的瀏覽器不支持HTML5音頻API。</audio>在本例中瀏覽器會(huì)先判斷音頻是否支持.ogg格式，如果支持就會(huì)直接播放song.ogg文件，否則會(huì)繼續(xù)判斷是否支持.mp3格式，支持則播放song.mp3。如果依次判斷下去沒有任何文件格式可以被執(zhí)行，則會(huì)返回給<audio>標(biāo)簽一個(gè)錯(cuò)誤事件。8.3.3音頻來源多樣性【例8-4】音頻來源的多樣性8.3.4自定義音頻控制如果不想在網(wǎng)頁上顯示<audio>標(biāo)簽自帶的播放/暫停按鈕以及音量調(diào)節(jié)等控件（例如希望作為網(wǎng)頁的背景音樂），可以不添加其中的controls屬性，重新用JavaScript對音頻的播放進(jìn)行控制。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)簽的瀏覽器中會(huì)直接顯示該提示語句，若瀏覽器支持該標(biāo)簽則不會(huì)顯示此提示語句。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)簽名稱’)語句動(dòng)態(tài)創(chuàng)建<video>標(biāo)簽，然后檢測<video>元素包含的canPlayType函數(shù)是否存在。8.4.2檢查瀏覽器支持情況2.使用JavaScript檢測代碼如下：varsupportVideo=!!document.creatElement(‘video’).canPlayType;前綴的雙感嘆號(hào)（?。。┯糜趯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)簽指定多個(gè)視頻文件，為不同的瀏覽器提供可支持的編碼格式。瀏覽器會(huì)按照先后順序使用第一個(gè)可識(shí)別的格式。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對視頻的播放進(jìn)行控制。

視頻播放時(shí)默認(rèn)的畫面大小是視頻源文件的畫面尺寸，如果需要更改也可以為<video>標(biāo)簽添加width（寬度）和height（高度）屬性放大或縮小視頻畫面。8.4.4自定義視頻控制【例8-10】自定義視頻控制按鈕8.4.4自定義視頻控制【例8-10】自定義視頻控制按鈕cont.8.5.1標(biāo)記媒體播放時(shí)間范圍8.5.2跳轉(zhuǎn)媒體播放時(shí)間點(diǎn)8.5.3獲取媒體播放時(shí)間8.5.4終止媒體文件的下載8.5.5使用Flash播放器8.5HTML5媒體API其他通用功能8.5.1標(biāo)記媒體播放時(shí)間范圍在為<audio>標(biāo)簽或<video>標(biāo)簽設(shè)置src屬性從而指定播放音頻或視頻來源時(shí)，可以加入一些額外的信息來指定需要播放的時(shí)間段。8.5.1標(biāo)記媒體播放時(shí)間范圍具體語法格式如下：src="音頻或視頻的URL地址#t=[starttime][,endtime]"需要使用井號(hào)（#）標(biāo)志分割前面的媒體文件來源URL和后面的額外信息。其中starttime指的是指定音頻或視頻的開始播放時(shí)間，如果省略不寫則默認(rèn)開始時(shí)間是音頻或視頻的開頭；endtime指的是指定音頻或視頻的終止播放時(shí)間，如果省略不寫則默認(rèn)終止時(shí)間是音頻或視頻的結(jié)束。8.5.1標(biāo)記媒體播放時(shí)間范圍開始時(shí)間starttime和終止時(shí)間endtime均可以填入整數(shù)或