Web前端開(kāi)發(fā)第19章：繪圖1本章主要內(nèi)容Canvas基礎(chǔ)知識(shí)圖形繪制圖形變換與控制案例：用Canvas繪制統(tǒng)計(jì)報(bào)表21.Canvas基礎(chǔ)知識(shí)基本原理Canvas元素在頁(yè)面上提供一塊像畫(huà)布一樣無(wú)色透明的區(qū)域，可通過(guò)Javascript腳本繪制圖形。在HTML頁(yè)面上定義Canvas元素除了可以指定id、style、class、hidden等通用屬性之外，還可以指定以下2個(gè)屬性：height：設(shè)置畫(huà)布組件的高度。width：設(shè)置畫(huà)布組件的寬度。31.1Canvas1.Canvas基礎(chǔ)知識(shí)基本原理在畫(huà)布上繪制圖形必須經(jīng)過(guò)以下三個(gè)步驟：獲取Canvas對(duì)應(yīng)的DOM對(duì)象，得到一個(gè)Canvas對(duì)象。調(diào)用Canvas對(duì)象的getContext()方法，得到CanvasRenderingContext2D對(duì)象-（可繪制圖形）。調(diào)用CanvasRenderingContext2D對(duì)象方法繪圖。41.1Canvas1.Canvas基礎(chǔ)知識(shí)CanvasAPICanvasAPI通過(guò)調(diào)用Canvas對(duì)象的getContext()方法獲得圖形對(duì)象。調(diào)用傳入?yún)?shù)【2d】，返回的CanvasRenderingContext2D對(duì)象就是CanvasAPI對(duì)象實(shí)例，叫做2D渲染上下文。51.1Canvas1.Canvas基礎(chǔ)知識(shí)常見(jiàn)的繪圖方法如下：61.2繪圖方法71.Canvas基礎(chǔ)知識(shí)CanvasRenderingContext2D屬性功能用法如下：81.3繪圖屬性92.圖形繪制CanvasRenderingContext2D提供了fillRect()和strokeRect()這2個(gè)繪制矩形的方法：fillRect(floatx,floaty,floatwidth,floatheight)：用于填充一個(gè)矩形區(qū)域，前兩個(gè)參數(shù)x、y定義該矩形區(qū)域的起點(diǎn)坐標(biāo)，決定了矩形的位置；width定義矩形區(qū)域的寬度；height定義矩形區(qū)域的高度。strokeRect(floatx,floaty,floatwidth,floatheight)：用于繪制一個(gè)矩形邊框，也就是用線條繪制出矩形的輪廓參數(shù)，功能和上一個(gè)方法相同。102.1矩形2.圖形繪制線條線條在Canvas繪圖中被稱為路徑。在Canvas上使用路徑的步驟如下：定義路徑，調(diào)用CanvasRenderingContext2D對(duì)象的beginPath()方法；定義子路徑，可以使用的方法有arc()、arcTo()、bezierCurveTo()、lineTo()、moveTo()、quadraticCurveTo()、rect()；關(guān)閉路徑，調(diào)用CanvasRenderingContext2D對(duì)象的closePath()方法；填充路徑或繪制路徑，調(diào)用CanvasRenderingContext2D對(duì)象的fill()方法或stroke()方法。112.2線條2.圖形繪制CanvasRenderingContext2D繪制線條方法介紹如下：moveTo(floatx,floaty)：把Canvas的當(dāng)前路徑結(jié)束點(diǎn)移動(dòng)到x、y對(duì)應(yīng)的點(diǎn)；lineTo(floatx,floaty)：把Canvas的當(dāng)前路徑從當(dāng)前結(jié)束點(diǎn)連接到x、y的對(duì)應(yīng)點(diǎn)。122.2線條2.圖形繪制多邊形CanvasRenderingContext2D只提供了繪制矩形的方法，要使用路徑才能繪制復(fù)雜的幾何圖形。正多邊形中心點(diǎn)為（dx，dy），外圓半徑為size，邊數(shù)為n，相鄰兩定點(diǎn)與中心點(diǎn)形成的角的弧度為2*Math.PI/n。132.3多邊形2.圖形繪制圓角矩形通過(guò)CanvasRenderingContext2D繪制矩形的方法，設(shè)置lineJoin="round"可以向畫(huà)布添加圓角矩形，但矩形的圓角不可控制。CanvasRenderingContext2D使用arcTo()方法繪制可控的圓角矩形。arcTo(floatx1,floaty1,floatx2,floaty2,floatradius)：向Canvas的當(dāng)前路徑上添加一段圓弧。arcTo()方法確定一段圓弧的方式是：假設(shè)從當(dāng)前點(diǎn)到P1(x1,y1)繪制一條線段，再?gòu)腜1(x1,y1)到P2(x2,y2)繪制一條線段，arcTo()則繪制一端同時(shí)與上面兩條線段相切，且半徑為radius的圓弧。142.4圓角矩形2.圖形繪制圓形繪制圓形同樣需要在Canvas上啟用路徑，通過(guò)路徑繪制圖形。CanvasRenderingContext2D繪制圓形的方法如下：arc(floatx,floaty,floatradius,floatstartAngel,floatendAngel,boolenantclockwise)：用于向當(dāng)前路徑添加一段圓弧。圓心坐標(biāo)為（x，y），半徑為radius，開(kāi)始角度為startAngel，結(jié)束角度為endAngel。startAngel、endAngel以弧度為單位，counterclockwise表示是否為逆時(shí)針?lè)较颉?52.5圓形2.圖形繪制曲線CanvasRrenderingContext2D提供了bezierCurveTo()和quadraticCurveTo()兩個(gè)方法，可以向Canvas的當(dāng)前路徑上添加復(fù)雜的曲線。兩種方法的區(qū)別與聯(lián)系如下：bezierCurveTo()和quadraticCurveTo()都是貝塞爾曲線，bezierCurveTo()是一種三次貝塞爾曲線，quadraticCurveTo()是一種二次貝塞爾曲線。162.6曲線2.圖形繪制曲線兩種方法的功能和屬性用法如下：bezierCurveTo(floatcpX1,floatcpY1,floatcpX2,floatcpY2,floatx,floaty)：向Canvas的當(dāng)前路徑添加一段貝塞爾曲線。貝塞爾曲線起點(diǎn)為當(dāng)前點(diǎn)，終點(diǎn)為（x，y），第一個(gè)控制點(diǎn)坐標(biāo)為（cpX1，cpY1），第二個(gè)控制點(diǎn)坐標(biāo)為(cpX3，cpY2)。quadraticCurveTo(floatcpX,floatcpY,floatx,floaty)：向Canvas當(dāng)前路徑添加一段二次曲線。172.6曲線2.圖形繪制文字Canvas不僅能繪制圖形，還能夠顯示文本。Canvas中的文本是以圖像形式繪制的，一旦文字繪制之后，就無(wú)法編輯，除非先擦除文字，再重新繪制。CanvasRenderingContext2D提供的繪制文字的方法功能用法如下：voidfillText(stringtext,floatx,floaty[,floatmaxWidth])：用于填充字符串。voidstrokeText(stringtext,floatx,floaty[,floatmaxWidth]))：用于繪制字符串邊框。182.7文字19現(xiàn)場(chǎng)演示：案例19-08：繪制文字案例19-09：文字textAlign屬性案例19-10：文字textBaseAlign屬性2.圖形繪制繪制圖像繪制圖像時(shí)，需使用drawImage方法，CanvasRenderingContext2D為繪位圖提供了三種用法：voiddrawImage(imageimage,floatx,floaty)：直接繪制，用于把image繪制到（x，y）處，不會(huì)對(duì)圖片做任何縮放處理，繪制出來(lái)的圖片保持原來(lái)的大小。voiddrawImage(imageimage,floatx,floaty,floatwidth,floatheight)：繪制并指定大小，該方法按照指定大?。╳idth、height）把image繪制到（x，y）處。voiddrawImage(imageimage,integersx,integersy,integersw,integersh,floatdx,floatdy,floatdw,floatdh)：從畫(huà)布中已經(jīng)畫(huà)好的圖像上復(fù)制全部或局部到畫(huà)布的另一位置。202.8圖像2.圖形繪制圖像平鋪圖像平鋪就是用圖像將畫(huà)布填滿，是繪制圖像的一個(gè)重要功能。實(shí)現(xiàn)平鋪技術(shù)有兩種方法：一種是使用前面所介紹的drawImage()方法。另一種實(shí)現(xiàn)平鋪效果方法是CanvasRenderingContext2D的createPattern方法。212.8圖像22現(xiàn)場(chǎng)演示：案例19-12：drawImage平鋪案例19-13：createPatternTile平鋪2.圖形繪制圖像裁剪使用Canvas繪制圖像時(shí)，經(jīng)常只需要保留圖像的一部分，使用CanvasAPI自帶的圖像裁剪功能可以實(shí)現(xiàn)這一功能。使用CanvasRenderingContext2D的clip方法實(shí)現(xiàn)Canvas元素的圖像裁剪功能，具體步驟如下：將需要從圖像上裁剪的區(qū)域定義成Canvas上的路徑。調(diào)用ConvasRenderingContext2D的clip()方法把路徑裁剪下來(lái)。繪制圖像，只有被clip()方法裁剪的路徑覆蓋的部分才會(huì)被顯示出來(lái)。232.8圖像2.圖形繪制像素處理CanvasAPI能獲取圖像中的每一個(gè)像素，得到該像素的RGBA值。使用圖形上下文對(duì)象的getImageData方法來(lái)獲取圖像中的像素，該方法的定義如下：varimageData=context.getImageData(sx,sy.sw,sh)：sx，sy分別表示獲取區(qū)域的起點(diǎn)橫坐標(biāo)、起點(diǎn)縱坐標(biāo)，sw、sh分別表示所獲取區(qū)域?qū)挾群透叨?。context.putImageData(imagedata,dx,dy[,dirtyX,dirty,dirtyWidth,dirtyHeight])：imageData為前面所述的像素?cái)?shù)組，dx、dy分別表示重繪圖像的起點(diǎn)橫坐標(biāo)、起點(diǎn)縱坐標(biāo)。242.8圖像2.圖形繪制位圖輸出當(dāng)程序CanvasRenderingContext2D通過(guò)CanvasRenderingContext2D在Canvas上繪圖完成后，通常會(huì)需要將該圖形或圖像輸出保存到文件中，可以調(diào)用Canvas提供的toDataURL()方法輸出位圖。toDataURL方法的用法如下：toDataURL(stringtype)：該方法把Canvas對(duì)應(yīng)的位圖編碼成DataURL格式的字符串。其中參數(shù)type是一個(gè)形如image/png格式的MIME字符串。252.8圖像3.圖形變換與控制坐標(biāo)變換CanvasRenderingContext2D提供坐標(biāo)變換支持，通過(guò)使用坐標(biāo)變換，Web前端開(kāi)發(fā)者無(wú)須繁瑣地計(jì)算每個(gè)點(diǎn)的坐標(biāo)，只需對(duì)坐標(biāo)系統(tǒng)進(jìn)行整體變換即可。CanvasRenderingContext2D支持的坐標(biāo)變換有平移、縮放和旋轉(zhuǎn)三種操作，對(duì)應(yīng)的方法分別為translate()，scale()和rotate()：translate(floatdx,foatdy)：用作平移坐標(biāo)系統(tǒng)。scale(floatsx,floatsy)：縮放坐標(biāo)系統(tǒng)。rotate(floatangle)：旋轉(zhuǎn)坐標(biāo)系統(tǒng)。263.1坐標(biāo)變換3.圖形變換與控制坐標(biāo)變換CanvasRenderingContext2D提供兩種方法來(lái)保存、恢復(fù)繪圖狀態(tài)：save()：保存當(dāng)前的繪圖狀態(tài)。restore()：恢復(fù)之前保存的繪圖狀態(tài)。273.1坐標(biāo)變換28現(xiàn)場(chǎng)演示：案例19-17：平移案例19-18：縮放案例19-19：旋轉(zhuǎn)案例19-20：坐標(biāo)變換綜合使用3.圖形變換與控制矩陣變換矩陣變換是CanvasRenderingContext2D提供的一個(gè)更通用的坐標(biāo)變換方法transform()。矩陣變換方法的具體使用方法如下：transform(m11,m12,m21,m22,dx,dy)：這是一個(gè)基于矩陣的變換方法。其中前4個(gè)參數(shù)組成變換矩陣；dx,dy負(fù)責(zé)對(duì)坐標(biāo)系統(tǒng)進(jìn)行平移。293.2矩陣變換3.圖形變換與控制設(shè)置陰影陰影是圖形展示中不可或缺的效果，經(jīng)常在Web和圖形設(shè)計(jì)中使用。在畫(huà)布中創(chuàng)建陰影效果是相對(duì)較簡(jiǎn)單的，它可以通過(guò)4個(gè)全局屬性進(jìn)行控制，具體如下：shadowBlur：設(shè)置陰影的模糊度。shadowColor：設(shè)置陰影的顏色。shadowOffsetX：設(shè)置陰影X方向的偏移。shadowOffsetY：設(shè)置陰影Y方向的偏移。303.3設(shè)置陰影3.圖形變換與控制疊加風(fēng)格CanvasRebderingContext2D繪圖時(shí)，后面繪制的圖形會(huì)默認(rèn)完全覆蓋在前面繪制的圖形。特殊情況下需要其他疊加風(fēng)格，可修改CanvasRebderingContext2D的globalCompositeOperation屬性來(lái)實(shí)現(xiàn)。313.4疊加風(fēng)格3.圖形變換與控制疊加風(fēng)格globalCompositeOperation各屬性如表所示：323.4疊加風(fēng)格3.圖形變換與控制線性漸變線性漸變方法的具體使用方法如下所示：createLinearGradient(floatxStart,floatyStart,floatxEnd,floatyEnd)：四個(gè)參數(shù)分別表示漸變開(kāi)始橫坐標(biāo)、漸變開(kāi)始縱坐標(biāo)、漸變結(jié)束橫坐標(biāo)、漸變結(jié)束縱坐標(biāo)。333.5填充風(fēng)格3.圖形變換與控制線性漸變線性漸變使用步驟如下所示：調(diào)用CanvasRenderingContext2D的createLinearGradient(floatxStart,floatyStart,floatxEnd,floatyEnd)方法創(chuàng)建一個(gè)線性漸變，該方法返回一個(gè)CanvasGradient對(duì)象。調(diào)用CanvasGradient對(duì)象的addColorStop(floatoffset,stringcolor)方法向線性漸變中添加顏色。將CanvasGradient對(duì)象賦值給CanvasRenderingCon