第5章 繪制圖形

本章要求：第5章繪制圖形canvas元素的基本概念如何在頁面上放置一個canvas元素使用canvas元素繪制出一個簡單矩形利用路徑繪制出圖形與多邊形在canvas畫布中使用圖像的方法主要內(nèi)容1.canvas基礎(chǔ)2.使用路徑繪制圓形3.運用樣式與顏色4.實現(xiàn)圖形的變形5.繪制陰影和組合圖形 7.繪制文字8.應(yīng)用圖像9.保存與恢復(fù)狀態(tài)10.文件的保存11.對畫布繪制實現(xiàn)動畫12.綜合實例——繪制桌面時鐘第5章繪制圖形5.1.1canvas元素簡介5.1.2插入canvas元素5.1.3繪制矩形實例5.1canvas基礎(chǔ)Canvas元素是HTML5中新增的一個重要元素，專門用來繪制圖形。在頁面上放置一個canvas元素，就相當(dāng)于在頁面上放置了一塊“畫布”，可以在其中進(jìn)行圖形的描繪。但是，在canvas元素里進(jìn)行繪畫，并不是指拿鼠標(biāo)來作畫。在網(wǎng)頁上使用canvas元素時，它會創(chuàng)建一塊矩形區(qū)域。默認(rèn)情況下該矩形區(qū)域?qū)挒?00像素，高為150像素，用戶可以自定義具體的大小或者設(shè)置canvas元素的其他特性。在頁面中加入了canvas元素后，我們便可以通過JavaScript來自由地控制它?？梢栽谄渲刑砑訄D片、線條以及文字，也可以在里面繪圖設(shè)置，還可以加入高級動畫?？煞诺紿TML頁面中的最基本的canvas元素代碼如下：<canvas></canvas>5.1.1canvas元素簡介首先，看一下在頁面上的HTML代碼中，應(yīng)該怎樣來放置一個canvas元素。在HTML頁面中插入canvas元素是非常直觀和簡單的，如下面的代碼就是一段可以被插入到HTML頁面中的canvas代碼。<canvaswidth="200"height="200"></canvas>以上代碼會在頁面上顯示出一塊200×200像素的“隱藏”區(qū)域。假如要為其增加一個邊框，可以用標(biāo)準(zhǔn)CSS邊框?qū)傩詠碓O(shè)置，代碼如下：<canvasid="djx"style="border:1pxsolid;"width="200"height="200"></canvas>在上面的代碼中，不但用CSS邊框?qū)傩栽O(shè)置了邊框，而且還增加了一個值為“djx”的id特性，這么做主要是為了在開發(fā)過程中可以通過id來快速找到該canvas元素。對于任何canvas來說，id都是尤為重要的，這主要是因為對canvas元素的所有操作都是通過腳本代碼控制的，如果沒有id的話，想要找到要操作的canvas元素會很難。5.1.2插入canvas元素帶邊框的canvas元素，在瀏覽器中的運行效果如圖5-1所示。圖5-1簡單的canvas元素【例5-1】下面我們在上面的畫布上，繪制一條對角線，其實現(xiàn)的主要步驟如下所示。首先，通過引用特定的canvasid值來獲取對canvas對象的訪問權(quán)。這里引用的id為djx。接著定義一個context變量，調(diào)用canvas對象的getContext方法，同時傳入使用的canvas類型。這里是通過傳入“2d”來獲取一個二維上下文，這也是到目前為止唯一可用的上下文。具體代碼如下：varcanvas=document.getElementById('djx');varcontext=canvas.getContext('2d');接下來，基于這個上下文執(zhí)行畫線的操作，主要是調(diào)用了三個方法——beginpath、moveTo和lineTo，傳入了這條線的起點和終點的坐標(biāo)。具體代碼如下：context.beginPath();context.moveTo(70,140);context.lineTo(140,70);最后，在結(jié)束canvas操作的時候，通過調(diào)用context.stroke()方法完成對角線的繪制。具體代碼如下：context.stroke();}window.addEventListener("load",drawDiagonal,true);在canvas中繪制的對角線的效果如圖5-2所示。圖5-2canvas中的對角線【例5-2】在canvas畫布中繪制一個矩形。在本例中調(diào)用了腳本文件中的draw函數(shù)進(jìn)行圖形描繪。該函數(shù)放置在body的屬性中，使用onload=“draw(‘canvas’);”語句。調(diào)用腳本文件中的draw函數(shù)進(jìn)行圖像描畫。在本例中draw函數(shù)的功能是把canvas畫布的背景用淺藍(lán)色涂滿，然后畫出一個綠色正方形，邊框為紅色。用canvas元素繪制矩形的具體步驟如下所示。（1）document.getElementById方法取得canvas元素，代碼如下：varcanvas=document.getElementById(id);（2）使用canvas對象的getContext方法來獲得圖形上下文。同時傳入使用的canvas類型，這里傳遞的仍然是“2d”，代碼如下：varcontext=canvas.getContext('2d');（3）填充與繪制邊框，用canvas元素繪制圖形的時候，有兩種方式——填充（fill）與繪制邊框（stroke）。填充是指填滿圖形內(nèi)部；繪制邊框是指不填滿圖形內(nèi)部，只繪制圖形的外框。Canvas元素結(jié)合使用這兩種方式來繪制圖形。5.1.3繪制矩形實例（4）設(shè)定繪圖樣式（style），在進(jìn)行圖形繪制的時候，首先要設(shè)定好繪圖的樣式（style），然后調(diào)用有關(guān)方法進(jìn)行圖形的繪制。所謂繪圖的樣式，主要是針對圖形的顏色而言的，但是并不限于圖形的顏色，在后面我們將會介紹如何設(shè)定顏色以外的樣式，本例中主要是應(yīng)用了如下兩種樣式：設(shè)定填充圖形的樣式fillStyle屬性——填充的樣式，在該屬性中填入填充的顏色值。設(shè)定圖形邊框的樣式strokeStyle——圖形邊框的樣式。在該屬性中填入邊框的顏色值。本例中的樣式代碼如下：context.fillStyle="green";context.strokeStyle="red";（5）指定線寬，使用圖像上下文對象的lineWidth屬性設(shè)置圖形邊框的寬度。在繪制圖形的時候，任何直線都可以通過lineWidth屬性來指定直線的寬度。本例中的設(shè)置線寬的代碼如下：context.lineWidth=1;（6）指定顏色值，繪圖時填充的顏色或邊框的顏色分別通過fillStyle屬性與strokeStyle屬性來指定。顏色值使用的是普通樣式表中使用的顏色值。例如“red”與“blue”這種顏色名，或“#EEEEFF”這種十六進(jìn)制的顏色值。另外，也可以通過rgb（紅色值、綠色值、藍(lán)色值）或rgba（紅色值、綠色值、藍(lán)色值、透明度）函數(shù)來指定顏色的值。本例中指定的顏色的值，如下代碼所示：context.fillStyle="green";context.strokeStyle="red";（7）矩形的繪制，分別使用fillRect方法與strokeRect方法來填充矩形和繪制矩形邊框。這兩個方法的定義如下所示。context.fillRect(x,y,width,height);context.strokeRect(x,y,width,height);這里的context指的是圖形上下文對象，這兩個方法使用同樣的參數(shù)，x是指矩形起點的橫坐標(biāo)，y是指矩形起點的縱坐標(biāo)，坐標(biāo)原點為canvas畫布的最左上角，width是指矩形的長度，height是指矩形的高度——通過這四個參數(shù)，矩形的大小同時也就被決定了。本例中繪制矩形的代碼如下：context.fillRect(50,50,100,100);context.strokeRect(50,50,100,100);本例中繪制的矩形效果如圖5-3所示。圖5-3繪制矩形的效果5.2使用路徑繪制圓形5.2.1繪制圓形5.2.2繪制火柴人

5.2.3繪制貝濟(jì)埃曲線要想繪制其他圖形，需要使用路徑。同繪制矩形一樣，繪制開始時還是要取得圖形上下文，然后需要執(zhí)行如下步驟。開始創(chuàng)建路徑創(chuàng)建圖像的路徑路徑創(chuàng)建完成后，關(guān)閉路徑設(shè)定繪制樣式，調(diào)用繪制方法，繪制路徑。從上述步驟，可以看出首先使用路徑勾勒圖形輪廓，然后設(shè)置顏色，進(jìn)行繪制。5.2.1繪制圓形【例5-3】用一個實例來對路徑的使用方法進(jìn)行介紹。在該實例中同樣是調(diào)用draw函數(shù)，來繪制一個紅色的圓形。下面是本例實現(xiàn)的具體過程。（1）使用圖形上下文對象的beginPath()方法，該方法的定義如下所示：context.beginPath()（2）創(chuàng)建圓形路徑時，需要使用圖形上下文對象的act方法。該方法的定義如下所示。context.arc(x,y,radius,startAngle,endAngle,anticlockwise)該方法使用六個參數(shù)，x為繪制圓形的起點橫坐標(biāo)，y為繪制圓形的起點縱坐標(biāo)，radius為圓形半徑，startAngle為開始角度，endAngle為結(jié)束角度，anticlockwise為是否按順時針方向進(jìn)行繪制。在canvasAPI中，繪制半徑與弧時指定的參數(shù)為開始弧度與結(jié)束弧度，如果習(xí)慣使用角度，請使用如下所示的方法將角度轉(zhuǎn)換為弧度。varradians=degrees*math.PI/180其中math.PI表示角度為180度，math.PI*2表示角度為360度。arc方法不僅可以用來繪制圓形，也可以用來繪制圓弧。因此，使用時必須要指定開始角度與結(jié)束角度。因為這兩個角度決定了弧度。Anticlockwise參數(shù)為一個布爾值的參數(shù)，參數(shù)值為true時，按順時針繪制；參數(shù)值為false時，按逆時針方向繪制。本例中繪制圓形的代碼如下：context.arc(100,100,75,0,Math.PI*2,true);（3）關(guān)閉路徑，路徑創(chuàng)建完成后，使用圖形上下文對象的closePath方法將路徑關(guān)閉。該方法定義如下所示。context.closePath();將路徑關(guān)閉后，路徑的創(chuàng)建工作就完成了，但是需要注意的是，這時只是路徑創(chuàng)建完畢而已，還沒有真正繪制圖形。（4）進(jìn)行圓形繪制，并設(shè)定繪制樣式。實現(xiàn)的代碼如下：context.fillStyle='rgba(255,0,0,0.25)';context.fill();繪制完成的圓形在瀏覽器中的效果如圖5-4所示。圖5-4使用路徑繪制圓形繪制直線時，一般會用到moveTo與lineTo兩種方法。1.moveTomoveTo方法的作用是將光標(biāo)移動到指定坐標(biāo)點，繪制直線的時候以這個坐標(biāo)點為起點。語法如下：moveTo(x,y)moveTo（x，y）：不繪制，只是將當(dāng)前位置移動到新的目標(biāo)坐標(biāo)（x，y）。2.lineTolineTo方法在moveTo方法中指定的直線起點與參數(shù)中指定的直線終點之間繪制一條直線。語法如下：lineTo(x,y)lineTo（x，y）：不僅將當(dāng)前位置移動到新的目標(biāo)坐標(biāo)（x，y），而且在兩個坐標(biāo)之間畫一條直線。簡而言之，上面兩個函數(shù)的區(qū)別在于：moveTo就像是提起畫筆，移動到新位置，而lineTo告訴canvas用畫筆從紙上的舊坐標(biāo)畫條直線到新坐標(biāo)。需要提醒大家注意的是，不管調(diào)用它們哪一個，都不會真正畫出圖形，因為我們還沒有調(diào)用stroke或者fill函數(shù)。目前，我們只是在定義路徑的位置，以便后面繪制時使用。下面看一個特殊的路徑函數(shù)叫做closePath，這個函數(shù)的行為和lineTo很像，唯一的差別在于closePath會將路徑的起始坐標(biāo)自動作為目標(biāo)坐標(biāo)。closePath還會通知canvas當(dāng)前繪制的圖形已經(jīng)閉合或者形成了完全封閉的區(qū)域，這對將來的填充和描邊都非常有用。此時，可以在已有的路徑中繼續(xù)創(chuàng)建其他的子路徑，或者隨時調(diào)用beginPath重新繪制新路徑并完全清除之前的所有路徑。5.2.2繪制火柴人【例5-4】下面將應(yīng)用canvas的arc、moveTo、lineTo的方法來繪制一個火柴人。下面是本例實現(xiàn)的具體過程。（1）通過document.getElementById方法取得canvas元素，然后，使用canvas對象的getContext方法來獲得圖形上下文，與此同時傳入使用的“2d”的canvas類型，代碼如下：

varcanvas=document.getElementById(id);varcontext=canvas.getContext('2d');（2）創(chuàng)建一個300×300，背景為藍(lán)色的畫布，代碼如下：context.fillStyle="#EEEEFF";context.fillRect(0,0,300,300);（3）使用圖形上下文對象的act方法，創(chuàng)建“火柴人的頭部”路徑。這里是一個空心的，邊框為3的紅色圓形。其實現(xiàn)的代碼如下：

context.beginPath(); context.strokeStyle='#c00'; context.lineWidth=3; context.arc(100,50,30,0,Math.PI*2,true); context.fill(); context.stroke();（4）火柴人的頭部繪制好以后，接下來我們來繪制火柴人的臉部。這里主要是繪制紅色的眼睛和嘴巴。當(dāng)繪制面部的時候，我們需要再次使用beginPath。這主要是為了讓臉部的路徑與頭部的路徑分離開。臉部特征中嘴實現(xiàn)的代碼如下：

context.beginPath(); context.strokeStyle='#c00'; context.lineWidth=3; context.arc(100,50,20,0,Math.PI,false); context.fill(); context.stroke();（5）接下來再創(chuàng)一個新的路徑來繪制眼睛。先繪制一個左眼睛，也就是繪制一個圓形并通過fillStyle方法為其填充為紅顏色，然后使用moveTo方法“抬起”畫筆來繪制右眼。其眼睛實現(xiàn)的代碼如下：

context.beginPath(); context.fillStyle='#c00'; context.arc(90,45,3,0,Math.PI*2,true); context.fill(); context.stroke(); context.moveTo(113,45); context.arc(110,45,3,0,Math.PI*2,true); context.fill(); context.stroke();（6）頭部繪制完成后，接下來就是繪制身體的部分，主要是上肢和下肢的繪制。在繪制身體的部分時，多次應(yīng)用了moveTo和lineTo方法。具體實現(xiàn)的代碼如下：

context.beginPath(); context.moveTo(100,80); context.lineTo(100,180); context.lineTo(75,250); //繪制左腿 context.moveTo(100,180); context.lineTo(125,250); //繪制右腿 context.moveTo(100,90); context.lineTo(75,140); //繪制左胳膊 context.moveTo(100,90); context.lineTo(125,140); //繪制右胳膊 context.stroke();（7）最后關(guān)閉路徑，路徑創(chuàng)建完成后，使用圖形上下文對象的closePath方法將路徑關(guān)閉。因為繪制的火柴人的每一部分都是路徑的一個獨立的子路徑，都能獨立繪制。因此只要在結(jié)尾處關(guān)閉路徑即可，無需調(diào)用fill方法或者stroke方法來執(zhí)行繪制。繪制的火柴人在瀏覽器中的效果如圖5-5所示。圖5-5使用路徑繪制火柴人貝濟(jì)埃曲線可以是二次和三次方的形式，常用于繪制復(fù)雜而有規(guī)律的形狀。繪制貝濟(jì)埃曲線主要使用bezierCurveTo方法，該方法可以說是lineTo的曲線版，將從當(dāng)前坐標(biāo)點到指定坐標(biāo)點中間的貝濟(jì)埃曲線追加到路徑中。該方法的定義如下所示。bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)該方法使用六個參數(shù)。繪制貝濟(jì)埃曲線的時候，需要兩個控制點，cp1x為第一個控制點的橫坐標(biāo)，cp1y為第一個控制點的縱坐標(biāo)；cp2x為第二個控制點的橫坐標(biāo)，cp2y為第二個控制點的縱坐標(biāo)；x為貝濟(jì)埃曲線的重點橫坐標(biāo)，y為貝濟(jì)埃曲線的終點縱坐標(biāo)。繪制二次樣條曲線，使用的方法是quadraticCurveTo。該方法的定義如下所示。quadraticCurveTo(cp1x,cp1y,x,y)5.2.3繪制貝濟(jì)埃曲線兩種方法的區(qū)別如圖5-6所示。它們都是一個起點一個終點（圖中的藍(lán)點），但二次方貝濟(jì)埃曲線只有一個（紅色）控制點點）而三次方貝濟(jì)埃曲線有兩個。參數(shù)

x和

y是終點坐標(biāo)，cp1x和

cp1y是第一個控制點的坐標(biāo)，cp2x和

cp2y是第二個的。圖5-6bezierCurve與quadraticCurve的區(qū)別【例5-5】本例中我們使用bezierCurveTo方法繪制一個紅色實心的的紅心。下面是本例實現(xiàn)的具體過程。context.beginPath(); context.fillStyle='#c00'; context.strokeStyle='#c00'; context.moveTo(75,40); context.bezierCurveTo(75,37,70,25,50,25); context.bezierCurveTo(20,25,20,62.5,20,62.5); context.bezierCurveTo(20,80,40,102,75,120); context.bezierCurveTo(110,102,130,80,130,62.5); context.bezierCurveTo(130,62.5,130,25,100,25); context.bezierCurveTo(85,25,75,37,75,40); context.fill(); context.stroke();從上面的代碼可以看出，紅心的繪制主要是多次使用了三次方貝濟(jì)埃曲線繪制的。其運行效果如圖5-7所示。圖5-7使用貝濟(jì)埃曲線繪制的紅心【例5-6】下面再來看一下使用quadraticCurveTo方法繪制二次方線的實例。下面是本例實現(xiàn)的具體過程。context.beginPath();context.moveTo(75,25);context.strokeStyle='#c00';context.quadraticCurveTo(25,25,25,62.5);context.quadraticCurveTo(25,100,50,100);context.quadraticCurveTo(50,120,30,125);context.quadraticCurveTo(60,120,65,100);context.quadraticCurveTo(125,100,125,62.5);context.quadraticCurveTo(125,25,75,25);context.stroke();context.fill();本例在瀏覽器中實現(xiàn)的效果如圖5-8所示。圖5-8二次方線繪制的實例5.3運用樣式與顏色5.3.1fillStyle和

strokeStyle屬性5.3.2globalAlpha屬性5.3.3線型Linestyles如果想要給圖形上色，有兩個重要的屬性可以做到：fillStyle和

strokeStyle。這兩個屬性的定義方法如下。fillStyle=colorstrokeStyle=colorstrokeStyle是用于設(shè)置圖形輪廓的顏色，而

fillStyle用于設(shè)置填充顏色。color可以是表示

CSS顏色值的字符串、漸變對象或者圖案對象。漸變和圖案對象將在后面的章節(jié)中進(jìn)行講解。默認(rèn)情況下，線條和填充顏色都是黑色(CSS顏色值

#000000)。這里需要注意的是如果自定義顏色則應(yīng)該保證輸入符合

CSS顏色值標(biāo)準(zhǔn)的有效字符串。下面的代碼都是符合標(biāo)準(zhǔn)的顏色表示方式，都表示同一種顏色（橙色）。context.fillStyle="orange";context.fillStyle="#FFA500";context.fillStyle="rgb(255,165,0)";context.fillStyle="rgba(255,165,0,1)";注意：

一旦設(shè)置了

strokeStyle或者

fillStyle的值，那么這個新值就會成為新繪制的圖形的默認(rèn)值。如果想要給每個圖形上不同的顏色，就需要重新設(shè)置

fillStyle或

strokeStyle的值。5.3.1fillStyle和

strokeStyle屬性【例5-7】下面先來看一下fillStyle實例，在本實例里，使用兩層

for循環(huán)來繪制方格陣列，每個方格使用不同的顏色。實例運行效果如圖5-9所示。圖5-9利用fillStyle屬性繪制的調(diào)色板從效果圖可以看出色彩很絢麗。但是，實現(xiàn)的代碼很簡單，只需要兩個變量

i和

j來為每一個方格產(chǎn)生唯一的

RGB色彩值，其中僅修改紅色和綠色的值，而保持藍(lán)色的值不變。就可以通過修改這些顏色的值來產(chǎn)生各種各樣的色板。其實現(xiàn)的主要的代碼如下：functiondraw(id){varcanvas=document.getElementById(id);varcontext=canvas.getContext('2d');for(vari=0;i<6;i++){for(varj=0;j<6;j++){context.fillStyle='rgb('+Math.floor(255-42.5*i)+','+Math.floor(255-42.5*j)+',0)';context.fillRect(j*25,i*25,25,25);}}}

【例5-8】下面再來看一下strokeStyle實例，這個示例與上面的有點類似，但這次用到的是

strokeStyle屬性，而且畫的不是方格，而是用

arc方法來畫圓。實例運行效果如圖5-10所示。圖5-10strokeStyle實例效果其實現(xiàn)的主要代碼如下：functiondraw(id){varcontext=document.getElementById('canvas').getContext('2d');for(vari=0;i<6;i++){for(varj=0;j<6;j++){context.strokeStyle='rgb(0,'+Math.floor(255-42.5*i)+','+Math.floor(255-42.5*j)+')';context.beginPath();context.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);context.stroke();}}除了可以繪制實色圖形，還可以用

canvas來繪制半透明的圖形。通過設(shè)置

globalAlpha屬性或者使用一個半透明顏色作為輪廓或填充的樣式來繪制透明或半透明的圖形。globalAlpha屬性定義代碼如下：globalAlpha=transparencyvalue這個屬性影響到

canvas里所有圖形的透明度，其有效的值范圍是

0.0（完全透明）到

1.0（完全不透明），默認(rèn)是

1.0。globalAlpha屬性在需要繪制大量擁有相同透明度的圖形時候相當(dāng)高效。5.3.2globalAlpha屬性【例5-9】下面通過一個示例來了解一下globalAlpha屬性的應(yīng)用。本例中用四色格作為背景，設(shè)置

globalAlpha為

0.3后，在上面畫一系列半徑遞增的半透明圓。最終結(jié)果是一個徑向漸變效果。圓疊加得越更多，原先所畫的圓的透明度會越低。通過增加循環(huán)次數(shù)，畫更多的圓，背景圖的中心部分會完全消失。效果如圖5-11所示。圖5-11通過globalAlpha屬性繪制的徑向漸變效果其實現(xiàn)的主要代碼如下：functiondraw(id){varcontext=document.getElementById('canvas').getContext('2d');context.fillStyle='#FD0';context.fillRect(0,0,75,75);context.fillStyle='#6C0';context.fillRect(75,0,75,75);context.fillStyle='#09F';context.fillRect(0,75,75,75);context.fillStyle='#F30';context.fillRect(75,75,75,75);context.fillStyle='#FFF';context.globalAlpha=0.3;for(vari=0;i<7;i++){context.beginPath();context.arc(75,75,10+10*i,0,Math.PI*2,true);context.fill();}}線型包括如下屬性：lineWidth=valuelineCap=typelineJoin=typemiterLimit=value通過這些屬性來設(shè)置線的樣式。下面將結(jié)合實例來講解一下各屬性的應(yīng)用及應(yīng)用后的效果。lineWidth屬性該屬性設(shè)置當(dāng)前繪線的粗細(xì)，屬性值必須為正數(shù)。默認(rèn)值是1.0。線寬是指給定路徑的中心到兩邊的粗細(xì)。換句話說就是在路徑的兩邊各繪制線寬的一半。因為畫布的坐標(biāo)并不和像素直接對應(yīng)，當(dāng)需要獲得精確的水平或垂直線的時候要特別注意。5.3.3線型Linestyles【例5-10】在下面的例子中，用遞增的寬度繪制了10條直線。最左邊的線寬1.0單位.本例實現(xiàn)的主要代碼如下：for(vari=0;i<10;i++){context.lineWidth=1+i;context.beginPath(); context.strokeStyle='#c00';context.moveTo(5+i*14,5);context.lineTo(5+i*14,140);context.stroke();本例運行效果如圖5-12所示。圖5-12設(shè)置不同值的lineWidth效果lineCap屬性該屬性決定了線段端點顯示的樣子。它可以為下面的三種值之一：butt，round和

square，默認(rèn)是

butt。【例5-11】本實例中，繪制了三條直線，分別賦予不同的

lineCap值。還有兩條輔助線，為了可以看清楚它們之間的區(qū)別，賦予lineCap值的三條線的起點終點都落在輔助線上。效果如圖5-13所示。圖5-13lineCap屬性的賦值的三種效果最左邊的線用了默認(rèn)的butt。可以注意到它是與輔助線齊平的。中間的是round的效果，端點處加上了半徑為一半線寬的半圓。右邊的是square的效果，端點處加上了等寬且高度為一半線寬的方塊。其實現(xiàn)的代碼如下：context.strokeStyle='#09f'; context.beginPath(); context.moveTo(10,10); context.lineTo(140,10); context.moveTo(10,140); context.lineTo(140,140); context.stroke(); context.strokeStyle='black';for(vari=0;i<lineCap.length;i++){context.lineWidth=15;context.lineCap=lineCap[i];context.beginPath();context.moveTo(25+i*50,10);context.lineTo(25+i*50,140);context.stroke();lineJoin屬性該屬性值決定了圖形中兩線段連接處所顯示的樣子。它可以是以下三種值之一：round,bevel和

miter。默認(rèn)是

miter。【例5-12】在下面的實例中同樣繪制了三條折線，分別設(shè)置不同的

lineJoin值。最上面一條是

round的效果，邊角處被磨圓了，圓的半徑等于線寬。中間和最下面一條分別是

bevel和

miter的效果。這里需要注意的是當(dāng)值是

miter的時候，線段會在連接處外側(cè)延伸直至交于一點，延伸效果受到miterLimit屬性的制約。本實例運行效果如圖5-14所示。圖5-14lineJoin屬性的三個值的運行效果從效果圖可以看出應(yīng)用

miter（最下面的一條）的效果，線段的外側(cè)邊緣會延伸交匯于一點上。線段直接夾角比較大的，交點不會太遠(yuǎn)，但當(dāng)夾角減少時，交點距離會呈指數(shù)級增大。miterLimit屬性就是用來設(shè)定外延交點與連接點的最大距離，如果交點距離大于此值，連接效果會變成了

bevel。本例實現(xiàn)的主要代碼如下：varlineJoin=['round','bevel','miter']; context.strokeStyle='#09f'; context.lineWidth=10;for(vari=0;i<lineJoin.length;i++){ context.lineJoin=lineJoin[i]; context.beginPath(); context.moveTo(-5,5+i*40); context.lineTo(35,45+i*40); context.lineTo(75,5+i*40); context.lineTo(115,45+i*40); context.lineTo(155,5+i*40); context.stroke();5.4實現(xiàn)圖形的變形5.4.1坐標(biāo)的變換5.4.2矩陣變換5.4.1坐標(biāo)的變換繪制圖形的時候，我們可能經(jīng)常會對繪制的圖形進(jìn)行變化，例如旋轉(zhuǎn)。使用canvasAPI的坐標(biāo)軸變換處理功能，可以實現(xiàn)這種效果。如果對坐標(biāo)使用變換處理，就可以實現(xiàn)圖像的變形處理了。對坐標(biāo)的變換處理，有如下三種方式；平移移動圖形的繪制主要是通過translate方法來實現(xiàn)的，該方法定義如下所示。context.translate(x,y);translate方法使用兩個參數(shù)——x表示將坐標(biāo)軸原點向左移動多少個單位，默認(rèn)情況下為像素；y表示將坐標(biāo)軸原點向下移動多少個單位?？s放使用圖形上下文對象的scale方法將圖形縮放。該方法的定義如下所示。context.scale(x,y);scale方法使用兩個參數(shù)，x是水平方向的放大倍數(shù)，y是垂直方向的放大倍數(shù)。將圖形縮小的時候，將這兩個參數(shù)設(shè)置為0到1之間的小數(shù)就可以了，例如0.5是指將圖形縮小一半。旋轉(zhuǎn)使用圖形上下文對象的rotate方法將圖形進(jìn)行旋轉(zhuǎn)。該方法的定義如下所示。context.rotate(angle);rotate方法接受一個參數(shù)angle，angle是指旋轉(zhuǎn)的角度，旋轉(zhuǎn)的中心點是坐標(biāo)軸的原點。旋轉(zhuǎn)是以順時針方向進(jìn)行的，要想逆時針旋轉(zhuǎn)時，將angle設(shè)定為負(fù)數(shù)就可以了?！纠?-13】下面通過實例來具體講解一下如何利用坐標(biāo)變換的方法繪制變形的圖形。本例中首先繪制了一個矩形，然后在一個循環(huán)中反復(fù)使用平移坐標(biāo)軸、圖形的縮放、圖形旋轉(zhuǎn)這三個技巧，最后繪制出一個非常漂亮的變形圖形。本實例運行效果如圖5-15所示。圖5-15應(yīng)用圖形的平移、縮放、旋轉(zhuǎn)繪制的變形效果實現(xiàn)本例的主要代碼如下：functiondraw(id){varcanvas=document.getElementById(id);if(canvas==null)returnfalse;varcontext=canvas.getContext('2d');context.fillStyle="#FFF";//設(shè)置背景色為白色context.fillRect(0,0,400,300);//創(chuàng)建一個畫布//圖形繪制

context.translate(200,50);context.fillStyle='rgba(255,0,0,0.25)';for(vari=0;i<50;i++){context.translate(25,25);//圖形向左，向下各移動25context.scale(0.95,0.95);//圖形縮放context.rotate(Math.PI/10);//圖形旋轉(zhuǎn)context.fillRect(0,0,100,50);}}5.4.2矩陣變換CanvasAPI中利用坐標(biāo)變換實現(xiàn)的圖形變形技術(shù)，當(dāng)利用坐標(biāo)變換不能滿足我們的需要時，就可以利用矩陣變換的技術(shù)。接下來，將介紹利用矩陣變換實現(xiàn)的變形技術(shù)。在介紹矩陣變換之前，首先要介紹一下變換矩陣，這個矩陣是專門用來實現(xiàn)圖形變形的，它與坐標(biāo)一起配合使用，以達(dá)到變形的目的。當(dāng)圖形上下文被創(chuàng)建完畢時，事實上也創(chuàng)建了一個默認(rèn)的變換矩陣，如果不對這個變換矩陣進(jìn)行修改，那么接下來繪制的圖形將以畫布的最左上角的坐標(biāo)原點繪制圖形，繪制出來的圖形也經(jīng)過縮放、變形的處理，但是如果對這個變換矩陣進(jìn)行修改，那么情況將會是不一樣的。使用圖形上下文對象的transform方法修改變換矩陣，該方法的定義如下所示。context.transform(m11,m12,m21,m22,dx,dy)該方法使用一個新的變換矩陣與當(dāng)前變換矩陣進(jìn)行乘法運算，該變換矩陣的形式如下所示。m11 m21 dxm12 m22 dy0 0 1其中m11，m21，m12，m22四個參數(shù)用來修改使用這個方法之后繪制圖形時的計算方法，以達(dá)到變形目的，dx與dy參數(shù)移動坐標(biāo)原點，dx表示將坐標(biāo)原點在x軸上向右移動x個單位，dy表示將坐標(biāo)原點在y軸上向下移動y個單位。默認(rèn)情況下以像素為單位。想要了解m11，m21，m12，m22四個參數(shù)是如何修改變形矩陣以達(dá)到變形目的的，就需要掌握矩陣乘法的有關(guān)知識，這里由于篇幅有限我們不具體講述關(guān)于矩陣乘法的有關(guān)知識，下面將通過幾個實例來介紹一下矩形變陣的工作原理。首先，上一節(jié)使用坐標(biāo)變換進(jìn)行圖像變形的技術(shù)中所提到的三個方法，實際上都是隱式地修改了變換矩陣，都可以使用transform方法來進(jìn)行代替：translate(x,y)可以使用context.transform(1,0,0,1,x,y)或context.transform(0,1,1,0,x,y)方法進(jìn)行代替，前面四個參數(shù)1,0,0,1,x,y或者0,1,1,0,x,y表示不對圖形進(jìn)行縮放操作，將dx設(shè)為x表示將坐標(biāo)原點向右移動x個單位，dy設(shè)為y表示將坐標(biāo)原點向下移動y個單位。scale(x,y)可以使用context.transform(x,0,0,y,0,0)或context.transform(0,y,x,0,0,0)方法進(jìn)行代替,前面四個參數(shù)x,0,0,y,0,0或0,y,x,0,0,0)表示將圖形橫向擴(kuò)大x倍，縱向擴(kuò)大y倍。dx,dy為0表示不移動坐標(biāo)原點。rotate(x,y)替換方法如下所示。context.transform(Math.cos(angle*Math.PI/180), Math.sin(angle*Math.PI/180),-Math.sin(angle*Math.PI/180),Math.cos(angle*Math.PI/180),0,0);或者context.transform(-Math.sin(angle*Math.PI/180), Math.cos(angle*Math.PI/180),Math.cos(angle*Math.PI/180),Math.sin(angle*Math.PI/180),0,0);其中前面四個參數(shù)以三角函數(shù)的形式結(jié)合起來，共同完成圖形按angle角度的順時針旋轉(zhuǎn)處理，dx，dy為0表示不移動坐標(biāo)原點。【例5-14】下面通過實例來看一下transform方法的工作原理。在該實例中，用循環(huán)的方法繪制了幾個圓弧，圓弧的大小與位置均不變，只是使用了transform方法讓坐標(biāo)原點每次向下移動10個像素，使得繪制出來的圓弧相互重疊，然后對圓弧設(shè)置七彩顏色，使這些圓弧的外觀達(dá)到彩虹的效果。本實例運行效果如圖5-16所示。圖5-16transform方法實現(xiàn)的彩虹其實現(xiàn)的主要代碼如下：functiondraw(id){varcanvas=document.getElementById(id);varcontext=canvas.getContext('2d');/*定義顏色*/varcolors=["red","orange","yellow","green","blue","navy","purple"];/*定義線寬*/context.lineWidth=10;context.transform(1,0,0,1,100,0)/*循環(huán)繪制圓弧*/for(vari=0;i<colors.length;i++){/*定義每次向下移動10個像素的變換矩陣*/context.transform(1,0,0,1,0,10);/*設(shè)定顏色*/context.strokeStyle=colors[i];/*繪制圓弧*/context.beginPath();context.arc(50,100,100,0,Math.PI,true);context.stroke();}}使用transform方法后，接下來要繪制的圖形都會按照移動后的坐標(biāo)原點與新的變換矩陣相結(jié)合的方法進(jìn)行重置，必要時可以使用setTransform方法將變換矩形進(jìn)行重置，setTransform方法定義如下所示。context.setTransform(m11,m12,m21,m22,dx,dy)；setTransform方法的參數(shù)及參數(shù)的用法與transform相同，事實上，該方法的作用為將畫布上的最左上角重置為坐標(biāo)原點，當(dāng)圖形上下文創(chuàng)建完畢時將所創(chuàng)建的初始變換矩陣設(shè)置為當(dāng)前變換矩陣，然后使用transform方法?！纠?-15】下面通過實例來了解一下setTransform的具體的使用方法。在該實例中首先創(chuàng)建一個紅色邊框的長方形，然后將該長方形順時針旋轉(zhuǎn)45度，繪制出一個新的長方形，并且繪制其邊框為綠色，然后將紅色長方形擴(kuò)大2.5倍繪制新的長方形，邊框為藍(lán)色，最后在紅色長方形右下方繪制同樣大小的長方形，邊框為灰色。本實例運行效果如圖5-17所示。圖5-17使用setTransform方法繪制變形圖形其實現(xiàn)的主要代碼如下：functiondraw(id){varcanvas=document.getElementById(id);varcontext=canvas.getContext('2d');/*-------------繪制紅色長方形--------*/context.strokeStyle="red";context.strokeRect(30,10,60,20);/*-----繪制順時針旋轉(zhuǎn)45°后的藍(lán)色長方形------*/varrad=45*Math.PI/180; //繪制45度圓弧context.setTransform(Math.cos(rad),Math.sin(rad),-Math.sin(rad),Math.cos(rad),0,0); //定義順時針旋轉(zhuǎn)45°的變換矩陣/*-----------繪制圖形----*/context.strokeStyle="blue";context.strokeRect(30,10,60,20);/*------繪制放大2.5倍后的綠色長方形--------*/context.setTransform(2.5,0,0,2.5,0,0);//定義放大2.5倍的變換矩陣

/*繪制圖形*/context.strokeStyle="green";context.strokeRect(30,10,60,20);/*將坐標(biāo)原點向右移動40像素，向下移動80像素后繪制灰色長方形*/context.setTransform(1,0,0,1,40,80);//定義將坐標(biāo)原點向右移動40像素，向下移動80像素的矩陣/*繪制圖形*/context.strokeStyle="gray";context.strokeRect(30,10,60,20);5.5繪制漸變圖形5.5.1繪制線性漸變5.5.2繪制徑向漸變5.5.1繪制線性漸變前面講過，可以使用fillStyle方法在填充時指定填充的顏色。使用該方法，除了指定顏色之外，還可以用來指定填充的對象。漸變是指在填充時從一種顏色慢慢過渡到另外一種的顏色。漸變分為幾種，下面先介紹一下最簡單的兩點之間的線性漸變。繪制線性漸變時，需要使用到LinearGradient對象。使用圖像上下文對象的createLinearGradient方法創(chuàng)建該對象。該方法的定義如下所示。context.createLinearGradient(xStart,yStart,xEnd,yEnd)該方法使用四個參數(shù)，xStart為漸變起始地點的橫坐標(biāo)，yStart為漸變起始地點的縱坐標(biāo)，xEnd為漸變結(jié)束地點的橫坐標(biāo)，yEnd為漸變結(jié)束地點的縱坐標(biāo)。通過使用該方法，創(chuàng)建了一個使用兩個坐標(biāo)點的LinearGradient對象。那么，漸變的顏色該怎么設(shè)定呢？在LinearGradient對象后，使用addColorStop方法進(jìn)行設(shè)定，該方法的定義如下所示。context.addColorStop(offset,color)使用這個方法可以追加漸變的顏色。該方法使用兩個參數(shù)——offset和color。Offset為所設(shè)定的顏色離開漸變起始點的偏移量。該參數(shù)的值是一個范圍在0到1之間的浮點值，漸變起始點的偏移量為0，漸變結(jié)束點的偏移量為1?！纠?-16】下面通過一個簡單的線性漸變的實例來介紹一下繪制漸變的步驟和原理，該實例是由上到下，由黑色漸變到白色的線性漸變。其具體的實現(xiàn)步驟如下所示。（1）創(chuàng)建一個像素為150的，由上到下的線性漸變。實現(xiàn)的代碼如下：varlingrad=context.createLinearGradient(0,0,0,150);（2）設(shè)置了漸變對象后，接下來就是定義漸變的顏色了。一個漸變可以有兩種或更多種的色彩變化。沿著漸變方向顏色可以在任何地方變化。要增加一種顏色變化，需要指定它在漸變中的位置。漸變位置可以在0和1之間任意取值。本例中定義一個漸變，色調(diào)從黑到白過渡，實現(xiàn)的代碼如下：lingrad.addColorStop(0,'black');lingrad.addColorStop(1,'white');（3）定義了一種漸變后，它只是保存在內(nèi)存當(dāng)中，而不會直接在canvas上畫出任何東西。要讓顏色漸變產(chǎn)生實際效果，就需要為這個漸變對象設(shè)置圖形的fillStyle屬性，并繪制這個圖形，例如畫一個矩形或直線。其實現(xiàn)的主要代碼如下：context.fillStyle=lingrad;context.fillRect(10,10,130,130);本例中繪制的線性漸變，運行效果如圖5-18所示。圖5-18由上到下的線性漸變5.5.2繪制徑向漸變使用canvasAPI，除了可以繪制線性漸變之外，還可以繪制徑向漸變。徑向漸變是指沿著圓形的半徑方向向外進(jìn)行擴(kuò)散的漸變方式。譬如在繪制太陽時，沿著太陽的半徑方向向外擴(kuò)散出去的光暈，就是一種徑向漸變。使用圖形上下文對象的createLinearGradient方法繪制徑向漸變，該方法的定義如下所示。context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)該方法使用六個參數(shù)，xStart為漸變開始圓的圓心橫坐標(biāo)，yStart為漸變開始圓的圓心縱坐標(biāo)，radiusStart為開始圓的半徑，xEnd為漸變結(jié)束圓的圓心橫坐標(biāo),yEnd為漸變結(jié)束圓的坐標(biāo)，radiusEnd為結(jié)束圓的半徑。在這個方法中，分別指定了兩個圓的大小與位置。從第一個圓的圓心處向外進(jìn)行擴(kuò)散漸變，一直擴(kuò)散到第二個圓的外輪廓處。在設(shè)定顏色時，與線性漸變相同，使用的是addColorStop方法進(jìn)行設(shè)定。同樣是需要設(shè)定0到1之間的浮點數(shù)來作為漸變轉(zhuǎn)折點的偏移量?！纠?-17】下面來看一個繪制徑向漸變的例子。本例中定義了4個不用的徑向漸變，設(shè)置起點稍微偏離終點，并且4個徑向漸變效果的最后一個色標(biāo)都是透明色，這樣就能制造出球狀

3D效果。本例運行效果如圖5-19所示。圖5-19繪制徑向漸變產(chǎn)生的類似3D效果實現(xiàn)本例的主要代碼如下：functiondraw(id){ varcontext=document.getElementById('canvas').getContext('2d'); varradgrad=context.createRadialGradient(45,45,10,52,50,30); radgrad.addColorStop(0,'#A7D30C'); radgrad.addColorStop(0.9,'#019F62'); radgrad.addColorStop(1,'rgba(1,159,98,0)');varradgrad2=context.createRadialGradient(105,105,20,112,120,50); radgrad2.addColorStop(0,'#FF5F98'); radgrad2.addColorStop(0.75,'#FF0188'); radgrad2.addColorStop(1,'rgba(255,1,136,0)'); varradgrad3=context.createRadialGradient(95,15,15,102,20,40); radgrad3.addColorStop(0,'#00C9FF'); radgrad3.addColorStop(0.8,'#00B5E2'); radgrad3.addColorStop(1,'rgba(0,201,255,0)'); varradgrad4=context.createRadialGradient(0,150,50,0,140,90); radgrad4.addColorStop(0,'#F4F201'); radgrad4.addColorStop(0.8,'#E4C700'); radgrad4.addColorStop(1,'rgba(228,199,0,0)'); context.fillStyle=radgrad4; context.fillRect(0,0,150,150); context.fillStyle=radgrad3; context.fillRect(0,0,150,150); context.fillStyle=radgrad2; context.fillRect(0,0,150,150); context.fillStyle=radgrad; context.fillRect(0,0,150,150);}5.6繪制陰影和組合圖形

5.6.1繪制陰影5.6.2繪制組合圖形5.6.1繪制陰影在HTML5中，使用canvas元素可以給圖形添加陰影效果。添加陰影效果時，只需利用圖形上下文對象的幾個關(guān)于陰影繪制的屬性即可，這些屬性如下：shadowOffsetX——陰影的橫向位移量shadowOffsetY——陰影的縱向位移量shadowBlur——陰影的模糊范圍shadowColor——陰影的顏色shadowOffsetX和

shadowOffsetY用來設(shè)定陰影在

X和

Y軸的延伸距離，它們是不受變換矩陣所影響的。負(fù)值表示陰影會往上或左延伸，正值則表示會往下或右延伸，他們默認(rèn)都是

0。shadowBlur用于設(shè)定陰影的模糊程度，它表示圖形陰影邊緣的模糊范圍。如果不希望陰影的邊緣太清晰，需要將陰影的邊緣模糊化時可以使用該屬性。設(shè)定該屬性值時必須要設(shè)定為比0大的數(shù)字，否則將被忽略。一般設(shè)定在0至10之間，開發(fā)時可以根據(jù)情況調(diào)整這個數(shù)值，以達(dá)到滿意效果。shadowColor用于設(shè)定陰影效果的延伸，值可以是標(biāo)準(zhǔn)的

CSS顏色值，默認(rèn)是全透明的黑色?！纠?-18】下面這個實例繪制了帶陰影效果的文字。本例運行效果如圖5-20所示。圖5-20給文字繪制陰影的效果本例實現(xiàn)的主要代碼如下：functiondraw(id){ varcontext=document.getElementById('canvas').getContext('2d'); context.shadowOffsetX=2; context.shadowOffsetY=2; context.shadowBlur=2; context.shadowColor="rgba(0,0,0,0.5)"; context.font="20pxTimesNewRoman"; context.fillStyle="Black"; context.fillText("mingrisoft",5,30);}5.6.2繪制組合圖形在前面的實例中，我們看到使用CanvasAPI可以將一個圖形重疊繪制在另一個圖形上面，但圖形中能夠被看到的部分完全取決于以哪種方式進(jìn)行組合，這時，我們需要使用到CanvasAPI的圖形組合技術(shù)。在HTML5中，只要用圖形上下文對象的globalCompositeOperation屬性就能自己決定圖形的組合方式了，使用方法如下所示。context.globalCompositeOperation=typetype的值必須是下面幾種字符串之一：下面將以圖形組合的方式，來說明type值的字符串表現(xiàn)形式。在下面的圖形中，黑色方塊是先繪制的，即“已有的

canvas內(nèi)容”，灰色圓形是后面繪制的，即“新圖形”。source-over這是默認(rèn)設(shè)置，表示新圖形會覆蓋在原有圖形之上。效果如下圖所示。source-in新圖形會僅僅出現(xiàn)與原有圖形重疊的部分。其它區(qū)域都變成透明的。效果如下圖所示。destination-in原有圖形中與新圖形重疊的部分會被保留，其它區(qū)域都變成透明的。效果如下圖所示。5.7繪制文字在HTML5中，可以在Canvas畫布中進(jìn)行文字的繪制，同時也可以指定繪制文字的字體、大小、對齊方式等，還可以進(jìn)行文字的紋理填充等。繪制文字時可以使用fillText方法或strokeText方法。fillText方法用填充方式繪制字符串，該方法的定義如下所示。voidfillText(text,x,y,[maxWidth]);該方法接受四個參數(shù)，第一個參數(shù)text表示要繪制的文字，第二個參數(shù)x表示繪制文字的起點橫坐標(biāo)，第三個參數(shù)y表示繪制文字的起點縱坐標(biāo)，第四個參數(shù)maxWidth為可選參數(shù)，表示顯示文字時的最大寬度，可以防止文字溢出。strokeText方法用輪廓方式繪制字符串，該方法的定義如下所示。voidstroketext(text,x,y,[maxWidth]);該方法參數(shù)功能與fillText方法相同。在使用CanvasAPI來進(jìn)行文字的繪制之前，先對該對象的有關(guān)文字繪制的屬性進(jìn)行設(shè)置，主要有如下幾個屬性：font屬性：設(shè)置文字字體。textAlign屬性：設(shè)置文字水平對齊方式，屬性值可以為start、end、left、right、center。默認(rèn)值為start。textBaseline屬性：設(shè)置文字垂直對齊方式，屬性值可以為top、hanging、middle、alphabetic、ideographic、bottom。默認(rèn)值為alphabetic。【例5-19】下面應(yīng)用fillText方法和strokeText方法來繪制一句歡迎語，通過對比看一下兩種方法設(shè)置字體樣式的區(qū)別。本例運行效果如圖5-21所示。圖5-21應(yīng)用fillText方法和strokeText方法繪制文字實現(xiàn)的代碼如下：<script>functiondraw(id){varcanvas=document.getElementById(id);if(canvas==null)returnfalse;varcontext=canvas.getContext('2d');context.fillStyle='#00f';context.font='italic30pxsans-serif';context.textBaseline='top';//填充字符串context.fillText('明日科技?xì)g迎你',0,0);context.font='bold30pxsans-serif';//輪廓字符串context.strokeText('明日科技?xì)g迎你',0,50);}</script>5.8應(yīng)用圖像5.8.1繪制圖像5.8.2圖像的局部放大5.8.3圖像平鋪

5.8.4圖像裁剪5.8.5處理像素5.8.1繪制圖像在HTML5中，不僅可以使用canvasAPI來繪制圖形，還可以讀取磁盤或網(wǎng)絡(luò)中的圖像文件，然后使用canvasAPI將圖像繪制在畫布中。繪制圖像時，需要使用drawImage方法，該方法的定義如下所示。drawImage(image,x,y)drawImage(image,x,y,width,height)drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight)第一種方法只使用三個參數(shù)，第一個參數(shù)可以是一個img元素、一個video元素，或者一個JavaScript中的image對象，使用該參數(shù)代表的實際對象來裝載圖像文件。x與y為繪制時該圖像在畫布中的起始坐標(biāo)。第二種方法中前三個參數(shù)的使用方法與第一種方法中的使用方法一樣，width、

height是指繪制時的圖像的寬度與高度。使用第一種方法繪制出來的圖像與原圖大小相同，而使用第二種方法可以用來進(jìn)行圖像縮放。第三種方法可以用來將畫布中已繪制的圖像的全部或者局部區(qū)域復(fù)制到畫布中的另一個位置上。該方法使用九個參數(shù)，image仍然代表被復(fù)制的圖像文件，sx與sy分別表示源圖像的被復(fù)制區(qū)域在畫布中的起始橫坐標(biāo)與起始縱坐標(biāo)，sWidth與sHeight表示被復(fù)制區(qū)域的寬度與高度，dx與dy表示復(fù)制后的目標(biāo)圖像在畫布中的起始橫坐標(biāo)與起始縱坐標(biāo)，dWidth與dHeight表示復(fù)制后的目標(biāo)圖像的寬度與高度。該方法可以只復(fù)制圖像的局部，只要將sx與sy設(shè)為局部區(qū)域的起始點坐標(biāo)，將sWidth與

sHeight設(shè)為局部區(qū)域的寬度與高度就可以了。該方法也可以用來將源圖像進(jìn)行縮放，只要將dWidth與dHeight設(shè)為縮放后的寬度與高度就可以了。繪制圖像時首先使用不帶參數(shù)的new方法創(chuàng)建image對象，然后設(shè)定該image對象的src屬性為需要繪制的圖像文件的路徑，具體代碼如下：image=newImage();image.src="image.jpg";//設(shè)置圖像路徑然后就可以使用drawImage方法繪制該圖像文件了。事實上，即使設(shè)定好Image對象的src屬性后，也不一定立刻就能把圖像繪制完畢，譬如有時該圖像文件是一個來源于網(wǎng)絡(luò)的比較大的圖像文件，這時用戶就要有足夠的耐心等待圖像全部裝載完畢才能看見該圖像了這種情況下，只要使用如下所示的方法，就可以解決這個問題了。image.onload=function(){繪制圖像的函數(shù)}在image對象的onload事件中同步執(zhí)行繪制圖像的函數(shù)，就可以一邊裝載一邊繪制了?！纠?-20】下面通過實例來具體看一下如何應(yīng)用上述方法裝載圖像，并繪制圖像。在本例中使用與頁面同一個目錄中的圖像文件imagemr.jpg進(jìn)行裝載，在一個循環(huán)中將同一圖像文件繪制在畫布的不同位置上。本例運行效果如圖5-22所示。圖5-22在畫布的不同位置裝載圖片在實現(xiàn)本例的代碼中，首先使用newIamge創(chuàng)建Iamge對象，然后指定該Iamge對象的圖像文件路徑，然后使用onload方法裝載圖像，在裝載的同時進(jìn)行繪制。其實現(xiàn)的主要代碼如下：functiondraw(id){