HTML5 Canvas 屬性、定義及方法

當你建立一個<canvas>元素後，就擁有了它的繪圖上下文。

1、簡單圖形，整套的屬性和方法專門用於繪製矩形：

一、fillStyle能夠設置爲CSS顏色、一個圖案或一種顏色漸變。fillStyle默認是純黑色，你能夠設置成你喜歡的任意顏色。只要頁面打開着，每一個繪圖上下文都會記錄本身的屬性，除非你重置過它。

二、fillRect(x,y,width,height)繪製一個矩形，並以當前的fillStyle來填充。

三、srtokeStyle和fillStyle同樣，能夠設置爲CSS顏色、一個圖案或一種顏色漸變。

四、strokeRect（x,y,width,height）使用當前的storke style來繪製一個矩形，strokeRect並不填充中間區域，而只繪製矩形的邊緣。

五、clearRect(x,y,width,height)清除指定矩形區域的像素。

2、路徑

按照慣例，不論開始繪製何種圖形，第一個須要調用的就是beginPath。這個簡單的函數不帶任何參數，它用來通知canvas將要開始繪製一個新的圖形了。對於canvas來講，beginPath函數最大的用處是canvas須要據此來計算圖形的內部和外部的範圍，以便完成後續的描邊和填充。

路徑會跟蹤當前座標，默認值是原點。canvas自己也跟蹤當前座標，不過可能經過繪製代碼來修改。

每個canvas都有一個路徑，定義路徑就如同用鉛筆做畫。你能夠任意做地畫，但它不必定是最終做品的一部分，直到你拿起畫筆沾上墨水描繪這條路徑。

moveTo(x,y)：不繪製，只是將當前位置移動到新目標座標（x,y），並做爲線條開始點。

lineTo(x,y)：繪製線條到指定的目標座標(x,y)，而且在兩個座標之間畫一條直線。無論調用它們哪個，都不會真正畫出圖形，由於咱們尚未主，調用stroke（繪製）和fil（填充）函數。當前，只是在定義路徑的位置，以便後面繪製時使用。

closePath()，這個函數跟lineTo很像，惟一的差異在於closePath會將路徑的起始座標自動做爲目標座標。closePath還會通知canvas當前繪製的圖形已經閉合或者造成了徹底封閉的區域。起鏈接起點，閉合路徑的做用。

3、文本

操做canvas文本的方式與操做其餘路徑對象的方式相同：能夠描繪文本輪廓和填充文本內部，同時，全部可以應用於其餘圖形的變換和樣式都能用於文本。context對象的文本繪製功能由兩個函數組成：

fillText(text,x,y,maxwidth)

trokeText(text,x,y,maxwidth)

兩個的參數徹底相同，必選參數包括文本參數以及用於指定文本位置的座標參數。maxwidth是可選參數，用於限制字體大小，它會將文本字體強制收縮到指定尺寸。此外，還有一個measureText函數可供使用，該函數會返回一個度量對象，其包含了在當前context環境下指定文本的實際顯示寬度。

爲了保證文本在各瀏覽器下都能正常顯示，在繪製上下文裏有如下字體屬性

一、font能夠是CSS字體規則中的任何值。包括：字體樣式、字體變種、字體大小與粗細、行高和字體名稱。

二、textAlign控制文本的對齊方式。它相似於（但不徹底相同）CSS中的text-align。可能的取值爲：start,end,left,right,和center.

三、textBaseline控制文本相對於起點的位置。能夠取值有top,hanging,middle,alphabetic,ideographic和bottom。對於簡單的英文字母，能夠放心的使用top,middle或bottom做爲文本基線。

4、顏色漸變

一旦咱們擁有了繪圖上下文，就能夠開始定義一個顏色漸變。漸變是兩種或更多顏色的平滑過分。canvas的繪圖上下文支持兩種類型的漸變：

一、createLinearGradient(x0,y0,x1,x1)沿着直線從（x0,y0)至(x1,y1)繪製漸變。

二、createRadialGradient(x0,y0,r0,x1,y1,r1)沿着兩個圓之間的錐面繪製漸變。前三個參數表明開始的圓，圓心爲（x0,y0），半徑爲r0。最後三個參數表明結束的圓，圓心爲(x1,y1)，半徑爲r1。

5、圖片

canvas的繪圖上下文中定義了幾種繪製圖片的方法：

一、drawIamge(image,dx,dy)接受一個圖片，並將之畫到canvaa中。給出的座標（dx,dy）表明圖片的左上角。好比，座標（0，0）將把圖片畫到canvas的左上角。

二、drawIamge(image,dx,dy,dw,dh)接受一個圖片，將其縮放爲寬度dw和高度dh，而後把它畫到canvas上的(dx,dy)位置。

三、drawIamge(image,sx,sy,sw,sh,dx,dy,dw,dh)接受一個圖片，經過參數（sx,sy,sw,sh）指定圖片裁剪的範圍，縮放到(dw,dh)的大小，最後把它畫到canvas上的(dx,dy)位置。

要在canvas上繪製圖像，須要一先有一個圖片。這個圖片能夠是已經存在的<img>元素，或者經過JS建立。不管採用哪一種方式，都須要在繪製canvas以前，徹底加載這張圖片。瀏覽器一般會在頁面腳本執行的同時異步加載圖片。若是試圖在圖片未徹底加載以前就將其呈現到canvas上，那麼canvas將不會顯示任何圖片。

6、漸變

漸變是指在顏色集上使用逐步抽樣算法，並將結果應用於描邊樣式和填充樣式中。使用漸變須要三個步驟：

（1）建立漸變對象

（2）爲漸變對象設置顏色，指明過渡方式

（3）在context上爲填充樣式或者描邊樣式設置漸變

要設置顯示哪一種顏色，在漸變對象上使用addColorStop函數便可。這個函數容許指定兩個參數：顏色和偏移量。顏色參數是指開發人員但願在偏移位置描邊或填充時所使用的顏色。偏移量是一個0.0到1.0之間的數值，表明沿着漸變線漸變的距離有多遠。

除了能夠變換成其餘顏色外，還能夠爲顏色設置alpha值（例如透明），而且alpha值也是能夠變化的。爲了達到這樣的效果，須要使用顏色值的另外一種表示方法，例如內置alpha組件的CSSrgba函數.

除了線性漸變之外，HTML5 Canvas API還支持放射性漸變，所謂放射性漸變就是顏色會介於兩個指定圓間的錐形區域平滑變化。放射性漸變和線性漸變使用的顏色終止點是同樣的：參數以下：

createRadialGradient(x0,y0,r0,x1,y1,r1)

代碼中，前三個參數表明以(x0,y0)爲圓心，r0爲半徑，後三個參數表明以(x1,y1)爲圓心，r1爲半徑的另外一個圓。漸變會在兩個圓中間的區域出現。

7、背景圖

直接繪製圖像有不少用處，但在某些狀況下，像CSS那樣使用圖片做爲背景也很是有用。HTML5 Canvas API還支持圖片平鋪。調用createPattern函數。

8、繪製曲線（二次曲線）

quadraticCurveTo函數繪製曲線的起點是當前座標，帶有兩組（x,y）參數，第二組是指曲線的終點。第一組表明控制點。所謂控制點位於曲線的旁邊（不是曲線之上），其做用至關於對曲線產生一個拉力。經過調整控制點的位置，就能夠改變曲線的曲率。

HTML5 Canvas API的其餘曲線功能還涉及bezierCurveTo、arcTo和arc函數。這些函數經過多種控制點（如半徑、角度等）讓曲線更具可塑性。

9、縮放canvas對象

scale(x,y)，這個函數帶有兩個參數來分別表明在x,y兩個維度的值。每一個參數在canvas顯示圖像的時候，向其傳遞在本方向軸上圖像要放大（或者縮小）的量。若是x值爲2，就表明所繪製圖像中所有元素都會變成兩倍寬。若是y值爲0.5，繪製出來的圖像所有元素都會變成以前的一半高。

注：要在原點執行圖形和路徑的變換操做，執行完成之後再統一平移。理由是綻開（scale）和旋轉（rotate）等變換操做都是針對原點進行的。若是對一我的不在原點的圖形進行旋轉變換，那麼rotate變換函數會將圖形繞着原點旋轉而不是在原地旋轉。與之相似，若是進行縮放操做時沒有將放置到合適的座標上，那麼全部路徑座標都會被同時縮放。取決於縮放比例的大小，新的座標可能會所有超出canvas範圍，進而給開發人員帶來困惑，爲何個人縮放操做會把圖像刪了？

10、變換

變換操做並不限於縮放和平移，咱們可使用函數context.rotate(angle)來旋轉圖像，甚至能夠直接修改底層變換矩陣以完成一些高級操做，如剪裁圖像的繪製路徑。如：context.rotate(1.57)，旋轉角度參數以弧度爲單位。

beginPath()：開始

moveTo(x,y)：起點座標

lineTo(x,y)：目標座標

closePath()：鏈接起點，閉合路徑

translate()：移動

rotate()：旋轉

restore()：恢復

scale()：縮放

save()：保存

rotate(angle)：旋轉圖像

quadraticCurveTo()：繪製曲線

stroke()：繪製

strokeText()：描繪文本輪廓

strokeStyle()：顏色設置

strokeRect()：使用當前的storke style來繪製一個矩形，而只繪製矩形的邊緣。

fill：填充

fillRect()：繪製一個矩形，並以當前的fillStyle來填充

fillStyle()：樣式填充

fillText：填充文本內容

drawIamge()：圖片填充

createPattern()：使用背景圖片填充

addColorStop()：漸變填充

createRadialGradient()：放射性漸變

clearRect()：清除指定矩形區域的像素

.lineCap（butt | square | round）：指定線條末端的樣式

.fillStyle：設置爲CSS顏色、一個圖案或一種顏色漸變

.lineWidth：線條寬度設置

.lineJoin(round)：修改當前形狀中線段的鏈接方式，讓拐角變得更圓滑

.shadowColor：任何css中的顏色值，可使用透明度(alpha)

.shadowOffsetX：像素值，值爲正數，向右移動陰影;值爲負數，向左移動陰影

.shadowOffsetY：像素值，值爲正數，向下移動陰影;值爲負數，向上移動陰影

.shadowBlur：高斯模糊值，值越大，陰影越模糊

 

closePath

摘自《HTML5高級程序設計》《HTML5揭祕》