HTML5繪圖基礎(chǔ)分析

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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