2.1?Canvas?概述

Canvas本質上是一個位圖畫布，其上繪制的圖形是不可縮放的，不能像SVG圖像那樣可以被放大縮小。此外，用Canvas繪制出來的對象不屬于頁面DOM結構或者任何命名空間。

使用canvas編程，首先要獲取其上下文（context）。接著在上下文中執行動作，最后將這些動作應用到上下文中。

canvas中的坐標是從左上角開始的，x軸沿著水平方向（按像素）向右延伸，y軸沿垂直方向向下延伸。左上角坐標為x=0,y-0的點稱作原點。

同大多數HTML元素一樣，canvas元素也可以通過應用CSS的方式來增加邊框，設置內邊距、外邊距等，而且一些CSS屬性還可以被canvas內的元素繼承。

2.2?使用HTML5?Canvas?API

修正——在繪制系統中的說法是變換——在應用的時候可以被順序應用、組合或者隨意修改。每個繪制操作的結果顯示在canvas上之前都要經過修正層去做修正。雖然這么做增加了額外的復雜性，但卻為繪制系統添加了更為強大的功能，可能像目前主流圖像編輯工具那樣支持實時圖像處理，所以API中這部分內容的復雜性是必要的。

關于可重用代碼有一條重要的建議：一般繪制都應從原點（坐標系的0,0點）開始，應用變換（縮放、平移、旋轉等），然后不斷修改代碼直至達到希望的效果。

context路徑函數

（1）moveTo(x,y)：不繪制，只是將當前位置移動到新的目的坐標(x,y);

（2）lineTo(x,y)：不僅將當前位置移動到新的目標坐標（x,y），而且在兩個坐標之間畫一條直線。

（3）closePath()：這個函數的行為同lineTo很像，唯一的差別在于closePaht會將路徑的起始坐標自動作為目標坐標。closePath還會通知canvas當前繪制的圖形已經閉合或者形成了完全封閉的區域，這對將來的填充和描邊都非常有用。

（4）strokeRect()：基于給出的位置和坐標畫出矩形的輪廓。

（5）clearRect()：清除矩形區域內所有內容并將它恢復到初始狀態，即透明色。

（6）quadraticCurveTo()：函數繪制曲線的起點是當前坐標，帶有兩組(x,y)邊。第二組是指曲線的終點。第一組代表控制點（control?point）。所謂的控制點位于曲線的旁邊（不是曲線之上），其作用相當于對曲線產生一個拉力。通過調整控制點的位置，就可以改變曲線的曲率。

圖片增加了canvas操作的復雜度：必須等到圖片完全加載后才能對其進行操作。瀏覽器通常會在頁面腳本執行的同時異步加載圖片。如果視圖在圖片未完全加載之前就將其呈現到canvas上，那么canvas將不會顯示任何圖片。

漸變是指在顏色集上使用逐步抽樣算法，并將結果應用于描邊樣式和填充樣式中。

使用漸變需要三個步驟：

（1）創建漸變對象；

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

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

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

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

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

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

scala函數帶有兩個參數來分別代表在x、y兩個維度的值。每個參數在canvas顯示圖像的時候，向其床底在本方向軸上圖像要放大（或者縮小）的量。

要在原點執行圖形和路徑的變換操作，執行完后再統一平移。理由就是縮放（scale）和旋轉（rotate）等變換操作都是針對原點進行的。

如果對一個不在原點的圖形進行旋轉變換，那么rotate變換函數會將圖形繞著原點旋轉而不是在原地旋轉。

注意，剪裁過的“陰影”樹會先被顯示出來，這樣一來，真正的樹就會按照Z軸順序（canvas中對象的重疊順序）顯示在陰影的上面。此外，樹影的填充用到了CSS的RGBA特性，通過特性我們將透明度值設置為正常情況下的20%。

操作canvas文本的方式與操作其他路徑對象的方式相同：可以描繪文本輪廓和填充文本內部；同事，所有能夠應用于其他圖形的變換和樣式都能用于文本。

context對象的文本繪制功能由兩個函數組成：

（1）fillText(text,x,y,maxwidth)

（2）strokeText(text,x,y,maxwidth)

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

文本呈現相關的context屬性

屬性	值	備??注
font	CSS?字體字符串	例如：italic?Arial,scan-serif
textAlign	start、end、left、right、center	默認是start
textBaseline	top、hanging、middle、alphabetic、ideographic、bottom	默認是alphabetic

陰影屬性

屬性	值	備注
shadowColor	任何CSS中的顏色值	可以使用透明度（alpha）
shadowOffsetX	像素值	值為正數，向右移動陰影；值為負數，向左移動陰影
shadowOffsetY	像素值	值為正數，向下移動陰影；值為負數，向上移動陰影
shadowBlur	高斯模糊值	值越大，陰影邊緣越模糊

?

Canvas?API最有用的特性之一是允許開發人員直接訪問canvas底層的像素數據。

（1）context.getImageData(sx,sy,sw,sh)。這個函數返回當前canvas狀態并以數值數值的方式顯示。具體來說，返回的對象包括三個屬性。

width：每行有多少個像素。

height：每列有多少個像素。

data：一維數組，存有從canvans獲取的每個像素的RGBA值。該數組為每個像素保存四個值——紅、綠、藍和alpha透明度。每個值都在0到255之間。因此，canvas上的每個像素在這個數組中就變成了四個整數值。數組的填充順序是從左到右，從上到下。

getImageData函數有四個參數，該函數只返回這四個參數所限定的區域內的數據。只有被x、y、width、height四個參數框定的矩形區域內的canvas上的像素才會被取到。

在給定了width和height的canvas上，在坐標(x,y)上的像素的構成如下。

紅色部分：((width*y)+x)*4

綠色部分：((width*y)+x)*4+1

藍色部分：((width*y)+x)*4+2

透明度部分：((width*y)+x)*4+3

（2）context.putImageData(imagedata,dx,dy)?該函數允許開發人員傳入一組圖像數據，其格式與最初從canvas上獲取來的是一樣的。

（3）context.createImageData(sw,sh)?這個函數可以創建一組圖像數據并綁定在canvas對象上。

如果canvas中的圖片并發來自包含它的頁面所在的域，頁面腳本將不能取得其中的數據。

轉載于:https://www.cnblogs.com/BigIdiot/archive/2013/01/14/2860219.html

總結

以上是生活随笔為你收集整理的html5 Canvas API的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。