XML與WEB Service技術(微軟)：第05章 Canvas

1、第5章 Canvas08 七月 20222Ch5 Canvas5.1 Canvas基礎5.2 基本形狀的繪制5.3 顏色和樣式5.4 陰影和文字繪制5.5 像素級繪圖5.6 繪圖狀態(tài)與矩陣變換08 七月 202235.1 Canvas基礎5.1.1 HTML5的canvas標記5.1.2 路徑（beginPath、closePath、stroke、fill） 5.1.3 移動坐標（moveTo） 5.1.1 HTML5的canvas標記1創(chuàng)建畫布:用canvas標記在網(wǎng)頁上繪制圖形和圖像，首先需要在頁面中添加一個canvas元素作為畫布，并規(guī)定元素的id、寬度和高度。 2繪制圖形:繪制工作必須

2、通過Canvas提供的API來完成。 Canvas原生支持的基本圖形只有一種矩形，至于其他的像圓形、多邊形等圖形則全部由路徑來負責繪制。var canvas = document.getElementById(myCanvas);var ctx = canvas.getContext(2d);08 七月 202245.1.2 路徑（beginPath、closePath、stroke、fill）方 法說 明context.beginPath()清除包含的所有子路徑，還原到默認的空狀態(tài)context.fill()用當前的填充樣式填充路徑context.stroke()用當前的輪廓樣式繪制路徑輪廓

3、context.scrollPathIntoView()滾動當前路徑到可視區(qū)域，對于手機等小屏幕的設備來說，該方法非常有用context.clip()創(chuàng)建剪切區(qū)域，即將繪制范圍限制到剪切區(qū)域內(nèi)context.isPointInPath(x, y)判斷某個點是否在當前路徑內(nèi)（true或者false）08 七月 202255.1.3 移動坐標（moveTo）可以把Canvas API提供的moveTo方法想象成是把筆提起，并從一個點移動到另一個點的過程。當初始化canvas元素對象或者調(diào)用beginPath的時候，起始坐標默認在原點(0,0)處。大多數(shù)情況下，我們都需要調(diào)用moveTo方法將當前坐

4、標移到其他地方，特別是用于繪制不連續(xù)的路徑時，此方法非常有用。08 七月 202265.2 基本形狀的繪制5.2.1 直線（lineTo）5.2.2 矩形（fillRect、strokeRect、clearRect）5.2.3 圓形和弧形（arc）5.2.4 用貝塞爾曲線繪制圖形（quadraticCurveTo）5.2.1 直線（lineTo）1用lineTo繪制直線2指定線型（lineWidth、lineCap、lineJoin、miterLimit）（1）線寬（2）線帽（3）線段連接（4）尖角限制08 七月 202285.2.2 矩形（fillRect、strokeRect、clearR

5、ect）1clearRect(x, y, width, height)2fillRect(x, y, width, height)3strokeRect(x, y, width, height)08 七月 202295.2.3 圓形和弧形（arc）首先調(diào)用context對象的beginPath方法創(chuàng)建路徑，然后依次將繪制的對象添加到路徑中，最后調(diào)用context的closePath方法關閉路徑或者調(diào)用fill方法填充路徑。1arc(x, y, radius, startAngle, endAngle, anticlockwise)2arcTo(x1, y1, x2, y2, radius)08

6、 七月 2022105.2.4 用貝塞爾曲線繪制圖形（quadraticCurveTo）貝塞爾曲線可以是二次方和三次方的形式，一般用于繪制復雜而有規(guī)律的形狀。二次貝塞爾曲線和三次貝塞爾曲線都有一個起點和一個終點，但二次貝塞爾曲線只有一個控制點，而三次貝塞爾曲線有兩個控制點。1quadraticCurveTo(cx, cy, x, y)2bezierCurveTo(c1x, c1y, c2x, c2y, x, y)08 七月 202211 5.3 顏色和樣式5.3.1 填充樣式和輪廓樣式（fillStyle、strokeStyle）5.3.2 透明度（Transparency）5.3.3 漸變（

7、Gradients）5.3.4 圖案（Patterns）08 七月 2022125.3.1 填充樣式和輪廓樣式（fillStyle、strokeStyle）canvas元素對象的fill方法用于填充某個區(qū)域，填充顏色由fillStyle屬性決定。stroke方法用于繪制輪廓，輪廓顏色由trokeStyle屬性決定， 顏色既可以是CSS顏色值的字符串，也可以是漸變對象或者圖案對象。默認為黑色。注意，一旦設置了fillStyle或者strokeStyle的值，那么這個新值就會成為新繪制的圖形的默認值。如果要給每個圖形繪制不同的顏色，只需要重新設置fillStyle或strokeStyle的值即可。

8、08 七月 2022135.3.2 透明度（Transparency）通過設置上下文對象的globalAlpha屬性或者使用一個半透明顏色作為輪廓或填充的樣式。globalAlpha屬性影響到canvas元素內(nèi)所有圖形的透明度，在需要繪制大量擁有相同透明度的圖形時，這個屬性相當高效。其有效值的范圍是0.0（完全透明）到1.0（完全不透明），默認值是1.0。不過，一般情況下，由于strokeStyle和fillStyle屬性接受符合CSS3規(guī)范的顏色值，所以使用CSS3的rgba()來分別設置具有透明度的填充顏色和輪廓顏色的情況比較多，也具有更好的可操作性和使用彈性。08 七月 2022145.

9、3.3 漸變（Gradients）下面的方法新建一個canvasGradient對象，并且賦給圖形的fillStyle或strokeStyle屬性。createLinearGradient(x1,y1,x2,y2)createRadialGradient(x1,y1,r1,x2,y2,r2)創(chuàng)建出canvasGradient對象后，就可以用addColorStop方法給它添加顏色了。addColorStop(position, color)在實際的項目開發(fā)中，可以根據(jù)需要添加任意多個色標（color stops），而且strokeStyle和fillStyle屬性都可以通過設置漸變樣式后再進行

10、繪制來實現(xiàn)漸變效果。08 七月 2022155.3.4 圖案（Patterns）而Canvas API提供了一個更簡單的方法來實現(xiàn)圖案的各種功能?；靖袷綖椋篶reatePattern(image,type)第1個參數(shù)image可以是一個Image對象的引用，也可以是另一個canvas對象。第2個參數(shù)type必須是下面的字符串值之一：repeat、repeat-x、repeat-y和no-repeat。圖案的應用與漸變類似，通過createPattern方法創(chuàng)建出一個pattern對象之后，將其賦給fillStyle或strokeStyle屬性即可。注意，必須確保Image對象已經(jīng)加載完畢才可

11、以調(diào)用createPattern方法，否則顯示的效果可能不正確。使用Image對象的onload事件可以確保設置圖案之前圖像已經(jīng)加載完畢。08 七月 2022165.4 陰影和文字繪制5.4.1 陰影（Shadow）5.4.2 字符文本的繪制08 七月 2022175.4.1 陰影（Shadow）在Canvas技術中，對陰影的支持有4個屬性。分別是shadowOffsetX 、shadowOffsetY、shadowBlur和shadowColor。shadowOffsetX屬性和shadowOffsetY屬性用來設定陰影在X和Y軸的延伸距離，這兩個屬性不受變換矩陣的影響。負值表示陰影會向上或

12、向左延伸，正值則表示會向下或向右延伸，默認值都是0。shadowBlur用于設定陰影的模糊程度，其值也不受變換矩陣的影響，默認值為0。shadowColor用于設定陰影效果，可以是標準的CSS顏色值，默認是全透明的黑色。08 七月 2022185.4.2 字符文本的繪制1fillText(text，x, y, maxWidth)strokeText(text,x,y,maxWidth)3measureText (text)4相關屬性font屬性：設置文字字體textAlign屬性：設置文字水平對齊方式，屬性值可以是start、end、left、right、center。默認值是start。te

13、xtBaseline屬性：設置文字垂直對齊方式，屬性值可以是top、hanging、middle、alphabetic、ideographic、bottom。默認值為alphabetic， 正是由于默認值為alphabetic，導致在瀏覽器中只能看到文字的很小一部分。08 七月 2022195.5 像素級繪圖canvas元素的渲染上下文API提供了createImageData、getImageData和putImageData三種方法針對像素進行操作，所基于的對象都是imageData對象。imageData對象包含width、height和data三個屬性，其中data包含了width h

14、eight 4個字節(jié)，之所以乘以4，是因為每個像素都需要保存R、G、B值和透明度alpha。5.5.1 導入和繪制圖像5.5.2 切片（Slicing）5.5.3 剪切（clip）和蒙版（mask）08 七月 2022205.5.1 導入和繪制圖像第1步是設置圖像來源通過document.getElementById方法來獲取頁面內(nèi)的某個圖片用腳本直接創(chuàng)建一個新的Image對象通過用一串Base64編碼的字符串的方式來定義一個圖片的url數(shù)據(jù)。第2步繪制圖像context.drawImage(image, dx, dy)context.drawImage(image, dx, dy, widt

15、h, height)context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)08 七月 2022215.5.2 切片（Slicing）利用下面的drawImage方法可以實現(xiàn)圖像的切片，即每次取圖片中的一部分來繪制。context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)利用切片進行圖像合成是最常用的圖像處理方式之一。假設有一張包含了所有元素的圖像，那么我們就可以用drawImage方法來合成一個新的圖像。這個方

16、法的另一個好處就是不需要單獨加載每一個圖像。08 七月 2022225.5.3 剪切（clip）和蒙版（mask）Canvas繪圖上下文（context）的clip方法用來設置一個剪輯區(qū)域，格式為：context.clip()在調(diào)用clip方法之后，接下來的代碼只對這個設定的剪輯區(qū)域有效，而不會影響其他的區(qū)域，在進行局部更新時這個方法很有用。默認情況下，剪輯區(qū)域是一個左上角在 (0, 0)，寬和高分別等于canvas元素的寬和高的矩形。蒙版類似于切片，不過蒙版是半透明的，通常用于將前景對象合成到當前背景中。mask元素用于定義蒙版，在JavaScript中使用mask屬性引用該蒙版。08 七月

17、 2022235.6 繪圖狀態(tài)與矩陣變換5.6.1 繪圖狀態(tài)5.6.2 變換（Transformations）08 七月 2022245.6.1 繪圖狀態(tài)繪圖狀態(tài)（Drawing State）反映了某一個時刻在canvas元素區(qū)域內(nèi)繪制的圖形的狀態(tài)。save方法和restore方法用于保存和恢復繪圖狀態(tài)。繪圖狀態(tài)由三部分構成：（1）當前的變換矩陣（2）當前的剪切區(qū)域（3）當前渲染上下文的屬性。注意，當前路徑對象以及當前的位圖都不屬于繪圖狀態(tài)。路徑是持續(xù)性的對象，而且可以通過beginPath方法進行重置（reset），而位圖則是canvas的屬性，不是渲染上下文的屬性。08 七月 202225

18、5.6.2 變換（Transformations）在Canvas技術中，常用的2D變換有平移（Translate）、旋轉(zhuǎn)（Rotate）、縮放（Scale）等，這些變換都會修改當前的變換矩陣。由于對canvas元素的所有的變換操作都基于變換矩陣，因此，如果不使用“save/restore”保存和恢復繪圖狀態(tài)，那么后續(xù)的繪圖操作，都會在當前所應用的變換狀態(tài)下完成。1矩陣變換基礎08 七月 202226（1）平移如果matrix(a,b,c,d,e,f)的參數(shù)為matrix(1,0,0,1,dx,dy)，那么x和y的計算公式就變成了x = x+dxy = y+dy很容易看到，其結果實際上就是在x,

19、y的基礎上進行平移后，新的坐標就變成了x+dx，y+dy。經(jīng)過這樣的參數(shù)簡化后，使用起來就方便多了。08 七月 202227（2）縮放如果將matrix(a,b,c,d,e,f)變?yōu)閙atrix(dx,0,0,dy,0,0)，那么x和y的計算公式就變成了x = x * dxy = y * dy這個操作實際上就是讓x的坐標縮放dx倍，讓y的坐標縮放dy倍。這就是縮放和拉伸的原理。如果dx和dy大于1，則是放大，而dx和dy小于1，就是縮小。另外，由于x方向和y方向是相互獨立的，所以可以一個方向放大，另一個方向縮小，我們把這種處理叫拉伸。注意，這里的縮放和拉伸是以區(qū)域的中心點作為原點的，而不是將左

20、上角作為原點。08 七月 202228（3）旋轉(zhuǎn)如果將matrix(a,b,c,d,e,f)變?yōu)閙atrix(cos,sin,-sin,cos,0,0)，則：x = x*cos-y*siny = x*sin+y*cos這里的表示圖形繞元素的中心點（坐標原點）順時針旋轉(zhuǎn)的角度。在CSS 3.0中，封裝后的定義形式只需要指定旋轉(zhuǎn)角度即可，例如：transform:rotate(40deg);08 七月 202229（4）切變切變就是將一個圖形的所有邊向某一相同的方向全部傾斜一定的角度。實際上就是將matrix(a,b,c,d,e,f)變?yōu)閙atrix(1,tan(y),tan(x),1,0,0)。

21、于是計算公式就簡化成：x = x+y*tan(x)+0 = x+y*tan(x)y = x*tan(y)+y+0 = x*tan(y)+y這里的x和y分別表示向x軸正方向和向y軸正方向傾斜的角度，兩者是相互獨立的。08 七月 202230（5）鏡像反射鏡像反射就是指元素對某一條直線做鏡像對稱變換，就像我們看鏡子里面的自己時，看到的是左右反過來的那樣。如果定義(ux,uy)為直線方向的單位向量，即直線方程是y=kx，那么ux=1/sqrt(1+k*k)，uy=k/sqrt(1+k*k)。那么就是將matrix(a,b,c,d,e,f)變?yōu)椋簃atrix(2*ux*ux-1,2*ux*uy,2*ux*uy,2*uy*uy-1,0,0)于是得到：x = (2*ux*ux-1)*