HTML5繪圖基礎(chǔ)分析

1、本章內(nèi)容畫布的基礎(chǔ)知識在畫布中使用路徑畫布中圖形的操作處理畫布中的圖像畫布的其它應(yīng)用畫布基礎(chǔ)知識使用畫布元素的步驟：使用元素創(chuàng)建一個畫布區(qū)域，并獲取該元素通過獲取的元素，取得該圖形元素的上下文環(huán)境對象根據(jù)取得的上下文環(huán)境對象，在頁面中繪制圖形或動畫HTML5 Canvas 的元素用getContext() 方法獲得canvas的“2d”上下文對象畫直線畫直線的功能可以用 beginPath()， moveTo()， lineTo() 和 stroke() 幾個方法的組合來實現(xiàn)。畫直線示例直線的寬度用lineWidth 屬性設(shè)定。直線的顏色用 strokeStyle 屬性設(shè)定。支持3種直線的端點

2、樣式，包括： butt， round， 和 square。 設(shè)定端點樣式是用lineCap屬性設(shè)定。畫弧線畫弧線的方法是 arc() 。每條弧線都需要由中心點、半徑、起始角度（弧度n*Math.PI）、結(jié)束角度（弧度m*Math.PI）和繪圖方向（順時針 false 還是逆時針 true ）這幾個參數(shù)來確定。context.arc(x, y, radius, startAngle, endAngle, antiClockwise);畫弧線示例畫二次曲線二次曲線使用 quadraticCurveTo() 方法來繪制。每條二次曲線要由上下文點、一個控制點和一個終止點來定義。 context.qua

3、draticCurveTo(controlX, controlY, endX, endY);畫二次曲線示例控制點通過分別與上下文點和終止點之間的虛擬切線控制曲線的形狀。其中上下文點由 moveTo() 方法在調(diào)用 quadraticCurveTo() 方法前指定?？刂泣c離上下文點和終止點越遠，曲線就越尖銳，反之，曲線則越平緩。畫貝塞爾曲線繪制貝塞爾曲線使用方法 bezierCurveTo() 。每條貝塞爾曲線需要由上下文點、兩個控制點和一個終止點來確定。context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX,

4、 endY);畫貝塞爾曲線示例貝塞爾曲線由當前上下文點、兩個控制點和終止點確定。貝塞爾曲線的第一部分是由上下文點和第一個控制點確定的虛擬線的切線，第二部分則是由第二個控制點和終止點確定的虛擬線的切線。畫路徑路徑是由多條子路徑連接構(gòu)成的。每條子路徑的終止點就將作為新的上下文點。我們可以使用lineTo()， arcTo()， quadraticCurveTo() 和 bezierCurveTo() 創(chuàng)建新的子路徑。每次要開始畫一條路徑的時候就要使用 beginPath() 方法。 context.beginPath();畫路徑示例線條的連接樣式HTML5 canvas支持3種線條的連接樣式，包括

5、：miter， round，和 bevel。設(shè)定連接樣式是用 lineJoin 屬性設(shè)定。缺省情況下，將使用 miter 樣式。連接樣式示例畫圓角畫圓角使用方法 arcTo() 。此方法需要一個控制點、一個終止點和半徑作為必要的參數(shù)。 context.arcTo(controlX,controlY,endX,endY,radius);圓角示例畫矩形繪制矩形使用 rect() 方法。每個矩形需要由左上角坐標 (x, y) 和矩形的寬與高 (width, height)來確定。 context.rect(x, y, width, height);矩形示例畫圓畫圓只需要在調(diào)用 arc() 方法時，將

6、起始角度設(shè)為0，終止角度設(shè)為 2 * PI 即可。context.arc(x, y, radius, 0 , 2 * Math.PI, false)圓示例圖形的顏色填充要填充圖形，需要用 fillStyle 屬性設(shè)置填充圖形用的顏色，然后使用 fill() 方法完成對圖形的填充。默認情況下， fillStyle 的顏色是黑色。 context.fillStyle = blue;context.fill();顏色填充示例線性漸變要使用線性漸變效果填充圖形，首先要使用 createLinearGradient() 方法從上下文對象中創(chuàng)建線性漸變對象。 方法的四個參數(shù)確定一條虛擬線段，漸變就沿著此條

7、線段的方向。然后用 addColorStop 方法為線性漸變對象設(shè)置漸變線上的關(guān)鍵點的顏色，offset 表示關(guān)鍵點是在漸變虛擬線段的什么位置，offset 的取值范圍是0到1，其中0表示是起始點，1表示是終止點，0到1之間的值表示是此虛擬線段中間的某一位置。再將此線性漸變對象作為填充類型賦值給上下文對象的 fillStyle 屬性。線性漸變示例 徑向漸變徑向漸變與線性漸變類似，只不過漸變方向不是線段，而是兩個圓之間。使用createRadialGradient() 方法創(chuàng)建漸變對象，參數(shù)是漸變起始圓和終止圓。徑向漸變示例 圖片填充要實現(xiàn)圖案填充功能，首先要用上下文對象的 createPatt

8、ern() 方法創(chuàng)建一個圖案填充對象，將這個對象賦值給上下文對象的 fillStyle 屬性，然后使用 fill() 方法填充圖形。其中 createPattern() 方法需要兩個參數(shù)，第一個參數(shù)是一個圖像對象，第二個參數(shù)是重復(fù)模式，可選的模式是 repeat， repeat-x， repeat-y， 以及 no-repeat，默認情況是 repeat 。圖片填充示例 繪制圖像繪制圖像需要使用 drawImage() 方法。此方法需要一個圖像對象和一個起始點坐標作為參數(shù)，其中起始點坐標是相對于canvas的左上角的位置。 context.drawImage(imageObj, x, y);

9、context.drawImage(imageObj, x, y, width, height);繪制圖像示例 圖像裁剪方法 drawImage() 還可以增加另六個參數(shù)來實現(xiàn)對圖像的裁剪。sourceX, sourceY, sourceWidth, sourceHeight, destWidth, destHeight。context.drawImage(imageObj, sx, sy, sw, sh, dx, dy, dw, dh);圖像裁剪示例 圖像加載器當在canvas中要使用多幅圖像的時候，最好是在繪制圖像之前就把圖像全部加載。辦法是用一個圖像加載函數(shù)一下在把圖像全加載進圖像對象中

10、來，然后再調(diào)用一個用戶定義的函數(shù)。圖像加載器示例 陰影效果要為圖形添加陰影需要用到 shadowColor，shadowBlur， shadowOffsetX 和 shadowOffsetY 屬性。陰影效果示例 透明效果設(shè)置圖形的透明度要用到 globalAlpha 屬性。 globalAlpha 屬性的值是一個介于 0 到 1 之間的浮點數(shù)。 0表示完全透明，而1表示完全不透明。透明效果示例 變換圖形三種變換圖形的方法translate(x,y)；x,y表示圖形原點橫縱坐標移動距離。寫 x0表示向右移動，y大于0表示向下移動。scale(x,y)；圖形的縮放， x,y表示圖形向橫縱坐標縮放倍

11、數(shù)值，大于0時放大rotate(angle)：圖形旋轉(zhuǎn)，angle表示旋轉(zhuǎn)角度，大于0時順時針旋轉(zhuǎn)。圖形變換示例 鏡面變換鏡面轉(zhuǎn)換只需要在 scale() 方法的參數(shù)中使用負值的參數(shù)，比如水平鏡像就把x參數(shù)賦值一個負數(shù)，垂直鏡像則是把y參數(shù)賦值一個負數(shù)。鏡面變換示例 全局組合操作默認情況下，在畫布中繪制多個圖形時，新繪制的圖形會覆蓋原圖形。其中,source為新圖形資源，destion為原圖形資源組合操作效果組合操作示例 切割圖像使用clip方法前，必須使用路徑的方式在畫布中繪制一個區(qū)域，然后調(diào)用 clip() 方法對該區(qū)域切割。裁剪區(qū)示例 文本要設(shè)置字體、大小和樣式，需要用到上下文對象的 f

12、ont 屬性。樣式可以是 normal, italic 或 bold 。context.font = italic 40px Calibri;文本的顏色用 fillStyle 屬性設(shè)置。 context.fillStyle = blue;要描繪字體邊緣的效果，要使用 strokeText() 方法替代fillText()，同時要用 strokeStyle 屬性替代 fillStyle 屬性。文本的對齊功能設(shè)定使用 textAlign 屬性。其可用的選項包括start, end, left, center 和right 。文本示例 圖像數(shù)據(jù)可以使用 getImageData() 方法和圖像對象的

13、屬性來獲取圖像中每一個像素的數(shù)據(jù)。圖像數(shù)據(jù)中的每個像素都由red，green，blue，和 alpha 值來表示?？梢杂?putImageData() 方法來設(shè)置圖像的像素值，然后重畫經(jīng)過修改的圖像。getImageData(sx,sy,sw,sh); sx為所選圖像區(qū)域的橫坐標，sy為所選圖像區(qū)域的縱坐標，sw為圖像區(qū)域的寬度,sh為圖像區(qū)域的高度。putImageData(image,dx,dy); image表示重新繪制的圖像, dx,dy分別表示重新繪制圖像在畫布左上角的橫縱坐標。 反轉(zhuǎn)顏色必須放在服務(wù)端執(zhí)行，才能顯示效果。如果要反轉(zhuǎn)圖像上每個像素的顏色，我們可以用255去減每個像素的

14、 red、 green、 blue 的值，然后再寫回 canvas 中去。反轉(zhuǎn)顏色示例 灰度圖要把一個圖像轉(zhuǎn)換為灰度圖，我們只需要遍歷圖像中的每個像素，計算像素的亮度值，然后把像素的red、 green、 blue 值都設(shè)為亮度值就可以了。灰度圖示例 透明圖透明圖示例獲取圖像數(shù)據(jù)URL通過 toDataURL() 方法，我們可以得到一個指向當前圖像的 64 bit PNG 格式圖像文件的URL.toDataURL示例將繪制的圖形保存為圖像如果想將在 canvas 中繪制的圖形保存為圖像文件，只需將圖像的數(shù)據(jù) url 賦值給HTML頁面上的 img 標簽的 src 屬性，用戶就可以通過右鍵保存的

15、形式把圖形保存到本地機器上了。保存圖像示例使用requestAnimationFrame方法創(chuàng)建動畫要用 HTML5 的 canvas 創(chuàng)建動畫，就需要用到 requestAnimationFrame 方法，這個方法能夠使瀏覽器智能的判斷幀率 FPS ，而且對于動畫的每一幀我們都可以進行更新、清除 canvas 、重畫 canvas，然后申請下一幀動畫。動畫的幀率跟機器硬件、瀏覽器有一定關(guān)系，一般來說流暢的動畫幀率在40FPS到60FPS之間。那么，對于程序員來說，很難判斷應(yīng)該針對每一個具體的用戶使用多大的幀率，因此，各瀏覽器都為我們提供了一個 requestAnimationFrame 方法

16、來自動判斷具體的幀率。使用requestAnimationFrame方法創(chuàng)建動畫 requestAnimationFrame 方法接受一個由用戶自定義的回調(diào)函數(shù)作為參數(shù)， requestAnimationFrame 將在當前幀完成后自動調(diào)用這個回調(diào)函數(shù)，而我們要做的就是在這個回調(diào)函數(shù)中進行我們的下一幀圖像繪制操作，并在此回調(diào)函數(shù)最后再次調(diào)用 requestAnimationFrame 方法，使動畫一幀幀的連續(xù)繪制下去。使用requestAnimationFrame方法創(chuàng)建動畫比如說，我們的繪圖方法叫做 animate，將此方法注冊為windows.onload方法，每次頁面調(diào)用就啟動此方法，每

17、次調(diào)用animate就在 canvas 繪制當前時間應(yīng)該顯示的那一幀圖像，并在 animate 結(jié)尾返回之前，以其自身，也就是以 animate 為回調(diào)函數(shù)參數(shù)調(diào)用 requestAnimationFrame， 由 requestAnimationFrame 自動再次調(diào)用 animate 繪制下一幀圖像。使用requestAnimationFrame方法創(chuàng)建動畫線性運動創(chuàng)建線性運動的動畫，我們需要在每一幀里根據(jù)運動速度和方向調(diào)整運動對象的 (x, y) 坐標的值。animate 帶有兩個參數(shù)，其中的 lastTime 指的是上一幀調(diào)用的時間，通過與當前時間的比較來確定當前幀中運動物體的位置。線

18、性運動示例加速運動加速運動可以通過修改水平 vx 和垂直方向上 vy 的加速度來實現(xiàn)。加速運動示例 開始和停止動畫要開始動畫，我們只需要調(diào)用一個不斷請求下一幀的方法就可以了，而要停止已啟動的動畫，那么就只要不再繼續(xù)請求下一幀就行了。開始和停止動畫示例 鼠標坐標為了獲取鼠標在 canvas 中的相對位置，可以使用 getMousePos() 方法，在此方法中根據(jù)鼠標的位置、canvas的位置以及頁面的偏移量來計算出鼠標相對于canvas的位置。鼠標坐標示例 練習：繪制時鐘繪制時鐘context.translate(x,y)方法，重新設(shè)置畫布的坐標源點，設(shè)置后，x,y坐標處為變?yōu)槠鹗甲鴺?0,0);context.arc(圓心x