




版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
1、第5章 HTML5的圖像及動(dòng)畫 5.1 canvas元素 5.3 圖形操作 5.2 使用路徑畫圖 5.4 圖像操作 5.5 其他操作 5.1 canvas元素 canvas元素是HTML5中新增的一個(gè)用于繪圖的重要元素,在頁(yè)面中增加一個(gè)canvas元素就相當(dāng)于在網(wǎng)頁(yè)中添加一塊畫布,之后就可以利用一系列的繪圖指令,在“畫布”上繪制圖形。cavans元素應(yīng)用方式如下 5.2 使用路徑畫圖1. canvas坐標(biāo)系canvas元素構(gòu)建的畫布,是一個(gè)基于二維(x,y)的網(wǎng)格。坐標(biāo)原點(diǎn)(0,0)位于canvas的左上角。從原點(diǎn)延x軸從左到右,取值依次遞增;從原點(diǎn)延y軸從上到下,取值依次遞增。2. 使用mo
2、veTo、lineTo畫線moveTo方法的應(yīng)用格式為moveTo(x,y)該方法的作用是將光標(biāo)移動(dòng)至指定坐標(biāo),該坐標(biāo)作為繪制圖形的起點(diǎn)坐標(biāo)。其中,參數(shù)x代表起點(diǎn)的橫坐標(biāo),參數(shù)y代表起點(diǎn)的縱坐標(biāo)。lineTo方法的應(yīng)用格式為lineTo(x,y)該方法與moveTo方法結(jié)合使用,用于指定一個(gè)坐標(biāo)作為繪制圖形的終點(diǎn)坐標(biāo)。其中,參數(shù)x代表重點(diǎn)的橫坐標(biāo),參數(shù)y代表重點(diǎn)的縱坐標(biāo)。如果多次調(diào)用lineTo方法,則可以定義多個(gè)中間點(diǎn)坐標(biāo)作為線條軌跡。最終將繪制形成一條由起點(diǎn)開始,經(jīng)過(guò)各個(gè)中間點(diǎn)的線條。該線條可能為直線也可能為折線,取決于lineTo所指定的中間點(diǎn)坐標(biāo)。3. 使用arc方法畫弧arc方法用于
3、繪制弧形、圓形,該方法的應(yīng)用格式為arc(x,y,radius,startAngle,endAngle,anticlockwise)該方法的各個(gè)參數(shù)說(shuō)明如下:(1)x:表示繪制弧形曲線圓心的橫坐標(biāo)。(2)y:表示繪制弧形曲線圓心的縱坐標(biāo)。(3)radius:表示繪制弧形曲線的半徑,單位為像素。(4)startAngle:表示繪制弧形曲線的起始弧度。(5)endAngle:表示繪制弧形曲線的結(jié)束弧度。(6)anticlockwise:表示繪制弧形曲線的方向,該參數(shù)為布爾型。當(dāng)賦值為true時(shí),將按照逆時(shí)針?lè)较蚶L制弧形;當(dāng)賦值為false時(shí),將按照順時(shí)針?lè)较蚶L制弧形。4. 繪制貝塞爾圖形使用bez
4、ierCurveTo方法可以繪制三次貝塞爾曲線,使用quadraticCurveTo方法繪制二次貝塞爾曲線。5.3 圖形操作1. 圖形樣式設(shè)置HTML5通過(guò)兩個(gè)步驟來(lái)實(shí)現(xiàn)圖形樣式添加:定義樣式,調(diào)用指定方法使圖形應(yīng)用樣式。例如下面代碼,將繪制一個(gè)紅色邊框矩形。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. 漸變圖形實(shí)現(xiàn)漸變主要有兩種方法,線性漸變和徑向漸變。(1)線性漸變HTML5中通過(guò)createLinearGradient方法創(chuàng)建LinearGradient對(duì)象實(shí)現(xiàn)線性漸變。createLinearGradient方法的應(yīng)用格式如下createLinearGradient(xStart,yStart,xEnd,yEnd); 各個(gè)參數(shù)說(shuō)明如下(1)xStart:漸變起始點(diǎn)的橫坐標(biāo)(2)yStart:漸變起始點(diǎn)的縱坐標(biāo)(3)xEnd:漸變終止點(diǎn)的橫坐標(biāo)(4)yEnd:簡(jiǎn)便終止點(diǎn)的縱坐標(biāo)當(dāng)調(diào)用該方法時(shí),將創(chuàng)建一個(gè)使用起點(diǎn)坐標(biāo)及終點(diǎn)坐標(biāo)的
6、LinearGradient對(duì)象,為該對(duì)象設(shè)置漸變顏色及漸變度的方法應(yīng)用格式如下addColorStop(offset,color);各個(gè)參數(shù)說(shuō)明如下(1)offset:顏色從離開漸變起始點(diǎn)開始變化的偏移量(2)color:漸變使用的顏色(2)徑向漸變HTML5提供了createRadialGradient方法用于實(shí)現(xiàn)徑向漸變,該方法的應(yīng)用格式為createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd); 各個(gè)參數(shù)說(shuō)明如下(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é)束圓的半徑徑向漸變也通過(guò)addColorStop方法為漸變?cè)O(shè)置顏色偏移量及使用顏色。3. 坐標(biāo)變換通過(guò)對(duì)默認(rèn)的坐標(biāo)系進(jìn)行坐標(biāo)變換處理,可以實(shí)現(xiàn)圖形旋轉(zhuǎn)、移位等效果。在HTML5中坐標(biāo)變換主要有三種方式(1)坐標(biāo)平移 將默認(rèn)坐標(biāo)系原點(diǎn),延x軸方向或y軸方向移動(dòng)指定單位長(zhǎng)度。translate方法用于設(shè)置坐標(biāo)平移,該方法應(yīng)用格式為translate(x,y);其中參數(shù)x為延x軸方向位移像素?cái)?shù),參數(shù)y為延y軸方向位移像素?cái)?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)以原點(diǎn)為中心,將圖形旋轉(zhuǎn)指定的角度,rotate方法用于設(shè)置坐標(biāo)旋轉(zhuǎn),該方法應(yīng)用格式為rotate(angle);其中參數(shù)angle為旋轉(zhuǎn)弧度,當(dāng)angle為正值時(shí)圖形以順時(shí)針?lè)较蛐D(zhuǎn);當(dāng)angle為負(fù)值時(shí),圖形以逆時(shí)針?lè)较蛐D(zhuǎn)。4. 圖形組合處理如果要自定義多個(gè)圖形重疊部分的組合方式,可以通過(guò)修改畫布上下文對(duì)象的globalCompositeOperation屬性來(lái)實(shí)現(xiàn)。該屬性可設(shè)置屬性值定義如下表所示5. 圖形陰影HTML5可以設(shè)置畫布上
9、下文對(duì)象的屬性,為圖形添加陰影效果。相關(guān)屬性及說(shuō)明如下表所示5.4 圖像操作1. 畫圖像使用drawImage()方法,可將頁(yè)面中已經(jīng)存在的元素,元素或通過(guò)Javascript創(chuàng)建的Image對(duì)象繪制在畫布中。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中通過(guò)調(diào)用畫布上下文對(duì)象的createPatt
10、ern方法實(shí)現(xiàn)圖像平鋪,該方法應(yīng)用格式為createPattern(image,type)參數(shù)image為被平鋪的圖像對(duì)象,type表示圖像平鋪方式。type參數(shù)可取值類型及說(shuō)明如下表所示3. 圖像剪裁HTML5中通過(guò)調(diào)用畫布上下文對(duì)象的clip()方法實(shí)現(xiàn)圖像剪裁。該方法不需提供參數(shù),但是在調(diào)用前需使用路徑方式在畫布中繪制剪裁區(qū)域。4. 像素處理在加載圖像時(shí)調(diào)用畫布上下文對(duì)象的getImageData()方法來(lái)獲取圖像中的像素,調(diào)用putImageData()方法將處理后的像素重新繪制在畫布中,從而實(shí)現(xiàn)對(duì)像素的處理。(1)getImageData()方法用于獲取指定區(qū)域內(nèi)的像素,應(yīng)用格式為g
11、etImageData(sx,sy,sw,sh);參數(shù)說(shuō)明如下1. 繪制文字繪制文字功能通過(guò)畫布上下文對(duì)象的fillText()方法以及strokeText()方法實(shí)現(xiàn)。(1)fillText()以填充的方式繪制文字,應(yīng)用格式如下fillText(content,dx,dy,maxLength)參數(shù)說(shuō)明如下 content:文字內(nèi)容信息 dx:繪制文字開始點(diǎn)的橫坐標(biāo) dy:繪制文字開始點(diǎn)的縱坐標(biāo) maxLength:可選參數(shù),表示繪制文字的最大長(zhǎng)度5.5 Canvas其他操作sx:選取圖像區(qū)域起點(diǎn)橫坐標(biāo)sy:選取圖像區(qū)域起點(diǎn)縱坐標(biāo)sw:選取圖像區(qū)域的寬度sh:選取圖像區(qū)域的高度(2)putIm
12、ageData()方法用于將處理后的像素重新繪制在指定區(qū)域內(nèi),應(yīng)用格式為putImageData(imagedata,dx,dy,dirtyX,dirtyY,dirtyW,dirtyH);參數(shù)說(shuō)明如下imagedata:通過(guò)getImageData方法獲取的像素集合對(duì)象dx:重新繪制圖像起點(diǎn)的橫坐標(biāo)dy:重新繪制圖像起點(diǎn)的縱坐標(biāo)dirtyX,dirtyY,dirtyW,dirtyH:這四個(gè)參數(shù)為可選參數(shù),對(duì)應(yīng)了一個(gè)矩形區(qū)域的起點(diǎn)橫坐標(biāo)、縱坐標(biāo)、寬度和高度。(2)strokeText()以描邊的方式繪制文字,應(yīng)用格式如下strokeText(content,dx,dy,maxWidth)參數(shù)含義與fillText()方法相同2. 保存、恢復(fù)圖形HTML5中save()方法用于保存已繪制的圖形,restore()方法用于還原保存的圖形。這兩個(gè)方法不需任何參數(shù),直接使用畫布上下文對(duì)象進(jìn)行調(diào)用即可。5.6 制作動(dòng)畫HTML5中通過(guò)繪制圖形、清除圖形、再繪制圖形、再清除圖形的方式,可以實(shí)現(xiàn)簡(jiǎn)單的
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025屆湖北省孝感市漢川市第二中學(xué)高三一診考試英語(yǔ)試卷含答案
- 2025年云南省昆明市祿勸縣一中高考英語(yǔ)二模試卷含答案
- 初級(jí)消防設(shè)施操作員習(xí)題庫(kù)及答案
- 分析化學(xué)練習(xí)題庫(kù)(含答案)
- 海洋石油鉆探的深海地質(zhì)調(diào)查進(jìn)展考核試卷
- 電氣機(jī)械設(shè)備施工安裝考核試卷
- 繼續(xù)拓展調(diào)味品與發(fā)酵制品相關(guān)主題考核試卷
- 電力設(shè)備維護(hù)與保養(yǎng)管理考核試卷
- 玻璃行業(yè)生產(chǎn)過(guò)程中的能源管理考核試卷
- 航標(biāo)反射器設(shè)計(jì)原理考核試卷
- 全友家居導(dǎo)購(gòu)員銷售流程及常用銷售話術(shù)
- 2025年建筑施工安全管理人員安全生產(chǎn)考試題庫(kù)
- 十萬(wàn)頭生態(tài)養(yǎng)豬場(chǎng)項(xiàng)目可行性報(bào)告
- 湖北省武漢市2025屆高中畢業(yè)生四月調(diào)研考試語(yǔ)文試卷及答案(武漢四調(diào))
- 2024國(guó)家安全教育大學(xué)生讀本題庫(kù)
- (完整版)新概念英語(yǔ)第1冊(cè).pdf
- 【課件】2.1 資源安全對(duì)國(guó)家安全的影響課件(人教版2019選擇性必修3)
- 工序自檢、互檢、巡檢制度(共8頁(yè))
- 《春夜喜雨》PPT
- 銀行間債券市場(chǎng)非金融企業(yè)債務(wù)融資工具持有人會(huì)議規(guī)程
- 管道鋪設(shè)用地征收
評(píng)論
0/150
提交評(píng)論