第05章__HTML5的圖像及動畫

1、第5章 HTML5的圖像及動畫 5.1 canvas元素 5.3 圖形操作 5.2 使用路徑畫圖 5.4 圖像操作 5.5 其他操作 5.1 canvas元素 canvas元素是HTML5中新增的一個用于繪圖的重要元素，在頁面中增加一個canvas元素就相當(dāng)于在網(wǎng)頁中添加一塊畫布，之后就可以利用一系列的繪圖指令，在“畫布”上繪制圖形。cavans元素應(yīng)用方式如下 5.2 使用路徑畫圖1. canvas坐標(biāo)系canvas元素構(gòu)建的畫布，是一個基于二維（x，y）的網(wǎng)格。坐標(biāo)原點（0，0）位于canvas的左上角。從原點延x軸從左到右，取值依次遞增；從原點延y軸從上到下，取值依次遞增。2. 使用mo

2、veTo、lineTo畫線moveTo方法的應(yīng)用格式為moveTo(x,y)該方法的作用是將光標(biāo)移動至指定坐標(biāo)，該坐標(biāo)作為繪制圖形的起點坐標(biāo)。其中，參數(shù)x代表起點的橫坐標(biāo)，參數(shù)y代表起點的縱坐標(biāo)。lineTo方法的應(yīng)用格式為lineTo(x,y)該方法與moveTo方法結(jié)合使用，用于指定一個坐標(biāo)作為繪制圖形的終點坐標(biāo)。其中，參數(shù)x代表重點的橫坐標(biāo)，參數(shù)y代表重點的縱坐標(biāo)。如果多次調(diào)用lineTo方法，則可以定義多個中間點坐標(biāo)作為線條軌跡。最終將繪制形成一條由起點開始，經(jīng)過各個中間點的線條。該線條可能為直線也可能為折線，取決于lineTo所指定的中間點坐標(biāo)。3. 使用arc方法畫弧arc方法用于

3、繪制弧形、圓形，該方法的應(yīng)用格式為arc(x,y,radius,startAngle,endAngle,anticlockwise)該方法的各個參數(shù)說明如下：（1）x：表示繪制弧形曲線圓心的橫坐標(biāo)。（2）y：表示繪制弧形曲線圓心的縱坐標(biāo)。（3）radius：表示繪制弧形曲線的半徑，單位為像素。（4）startAngle：表示繪制弧形曲線的起始弧度。（5）endAngle：表示繪制弧形曲線的結(jié)束弧度。（6）anticlockwise：表示繪制弧形曲線的方向，該參數(shù)為布爾型。當(dāng)賦值為true時，將按照逆時針方向繪制弧形；當(dāng)賦值為false時，將按照順時針方向繪制弧形。4. 繪制貝塞爾圖形使用bez

4、ierCurveTo方法可以繪制三次貝塞爾曲線，使用quadraticCurveTo方法繪制二次貝塞爾曲線。5.3 圖形操作1. 圖形樣式設(shè)置HTML5通過兩個步驟來實現(xiàn)圖形樣式添加：定義樣式，調(diào)用指定方法使圖形應(yīng)用樣式。例如下面代碼，將繪制一個紅色邊框矩形。var canvas = document.getElementById(myCanvas);var context = canvas.getContext(2d);context.strokeStyle= red;context.strokeRect(50,50,150,130); /繪制矩形并在邊緣填充紅色context.clearR

5、ect(70,70,110,90); /清除指定區(qū)域像素2. 漸變圖形實現(xiàn)漸變主要有兩種方法，線性漸變和徑向漸變。（1）線性漸變HTML5中通過createLinearGradient方法創(chuàng)建LinearGradient對象實現(xiàn)線性漸變。createLinearGradient方法的應(yīng)用格式如下createLinearGradient(xStart,yStart,xEnd,yEnd); 各個參數(shù)說明如下（1）xStart：漸變起始點的橫坐標(biāo)（2）yStart：漸變起始點的縱坐標(biāo)（3）xEnd：漸變終止點的橫坐標(biāo)（4）yEnd：簡便終止點的縱坐標(biāo)當(dāng)調(diào)用該方法時，將創(chuàng)建一個使用起點坐標(biāo)及終點坐標(biāo)的

6、LinearGradient對象，為該對象設(shè)置漸變顏色及漸變度的方法應(yīng)用格式如下addColorStop(offset,color);各個參數(shù)說明如下（1）offset：顏色從離開漸變起始點開始變化的偏移量（2）color：漸變使用的顏色（2）徑向漸變HTML5提供了createRadialGradient方法用于實現(xiàn)徑向漸變，該方法的應(yīng)用格式為createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd); 各個參數(shù)說明如下（1）xStart：漸變開始圓的圓心橫坐標(biāo)（2）yStart：漸變開始圓的圓心縱坐標(biāo)（3）radi

7、usStart：漸變開始圓的半徑（4）xEnd：漸變結(jié)束圓的圓心橫坐標(biāo)（5）yEnd：漸變結(jié)束圓的圓心縱坐標(biāo)（6）radiusEnd：漸變結(jié)束圓的半徑徑向漸變也通過addColorStop方法為漸變設(shè)置顏色偏移量及使用顏色。3. 坐標(biāo)變換通過對默認的坐標(biāo)系進行坐標(biāo)變換處理，可以實現(xiàn)圖形旋轉(zhuǎn)、移位等效果。在HTML5中坐標(biāo)變換主要有三種方式（1）坐標(biāo)平移 將默認坐標(biāo)系原點，延x軸方向或y軸方向移動指定單位長度。translate方法用于設(shè)置坐標(biāo)平移，該方法應(yīng)用格式為translate(x,y);其中參數(shù)x為延x軸方向位移像素數(shù)，參數(shù)y為延y軸方向位移像素數(shù)。（2）坐標(biāo)放大將圖像延x軸方向或y軸方

8、向放大的倍數(shù)，scale方法用于設(shè)置坐標(biāo)放大，該方法應(yīng)用格式為scale(x,y);其中參數(shù)x為延x軸方向放大倍數(shù)，y為沿y軸方向放大倍數(shù)。（3）坐標(biāo)旋轉(zhuǎn)以原點為中心，將圖形旋轉(zhuǎn)指定的角度，rotate方法用于設(shè)置坐標(biāo)旋轉(zhuǎn)，該方法應(yīng)用格式為rotate(angle);其中參數(shù)angle為旋轉(zhuǎn)弧度，當(dāng)angle為正值時圖形以順時針方向旋轉(zhuǎn)；當(dāng)angle為負值時，圖形以逆時針方向旋轉(zhuǎn)。4. 圖形組合處理如果要自定義多個圖形重疊部分的組合方式，可以通過修改畫布上下文對象的globalCompositeOperation屬性來實現(xiàn)。該屬性可設(shè)置屬性值定義如下表所示5. 圖形陰影HTML5可以設(shè)置畫布上

9、下文對象的屬性，為圖形添加陰影效果。相關(guān)屬性及說明如下表所示5.4 圖像操作1. 畫圖像使用drawImage()方法，可將頁面中已經(jīng)存在的元素，元素或通過Javascript創(chuàng)建的Image對象繪制在畫布中。drawImage方法共有三種應(yīng)用格式（1）drawImage(image,dx,dy)，直接繪制圖像（2）drawImage(image,dx,dy,dw,dh)，繪制縮放圖像（3）drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)，繪制切割圖像2. 圖像平鋪圖像平鋪指用按一定比例縮小的圖像填滿畫布。HTML5中通過調(diào)用畫布上下文對象的createPatt

10、ern方法實現(xiàn)圖像平鋪，該方法應(yīng)用格式為createPattern(image,type)參數(shù)image為被平鋪的圖像對象，type表示圖像平鋪方式。type參數(shù)可取值類型及說明如下表所示3. 圖像剪裁HTML5中通過調(diào)用畫布上下文對象的clip()方法實現(xiàn)圖像剪裁。該方法不需提供參數(shù)，但是在調(diào)用前需使用路徑方式在畫布中繪制剪裁區(qū)域。4. 像素處理在加載圖像時調(diào)用畫布上下文對象的getImageData()方法來獲取圖像中的像素，調(diào)用putImageData()方法將處理后的像素重新繪制在畫布中，從而實現(xiàn)對像素的處理。（1）getImageData()方法用于獲取指定區(qū)域內(nèi)的像素，應(yīng)用格式為g

11、etImageData(sx,sy,sw,sh);參數(shù)說明如下1. 繪制文字繪制文字功能通過畫布上下文對象的fillText()方法以及strokeText()方法實現(xiàn)。（1）fillText()以填充的方式繪制文字，應(yīng)用格式如下fillText(content,dx,dy,maxLength)參數(shù)說明如下 content：文字內(nèi)容信息 dx：繪制文字開始點的橫坐標(biāo) dy：繪制文字開始點的縱坐標(biāo) maxLength：可選參數(shù)，表示繪制文字的最大長度5.5 Canvas其他操作sx：選取圖像區(qū)域起點橫坐標(biāo)sy：選取圖像區(qū)域起點縱坐標(biāo)sw：選取圖像區(qū)域的寬度sh：選取圖像區(qū)域的高度（2）putIm

12、ageData()方法用于將處理后的像素重新繪制在指定區(qū)域內(nèi)，應(yīng)用格式為putImageData(imagedata,dx,dy,dirtyX,dirtyY,dirtyW,dirtyH);參數(shù)說明如下imagedata：通過getImageData方法獲取的像素集合對象dx：重新繪制圖像起點的橫坐標(biāo)dy：重新繪制圖像起點的縱坐標(biāo)dirtyX，dirtyY，dirtyW，dirtyH：這四個參數(shù)為可選參數(shù)，對應(yīng)了一個矩形區(qū)域的起點橫坐標(biāo)、縱坐標(biāo)、寬度和高度。（2）strokeText()以描邊的方式繪制文字，應(yīng)用格式如下strokeText(content,dx,dy,maxWidth)參數(shù)含義與fillText()方法相同2. 保存、恢復(fù)圖形HTML5中save()方法用于保存已繪制的圖形，restore()方法用于還原保存的圖形。這兩個方法不需任何參數(shù)，直接使用畫布上下文對象進行調(diào)用即可。5.6 制作動畫HTML5中通過繪制圖形、清除圖形、再繪制圖形、再清除圖形的方式，可以實現(xiàn)簡單的