关于H5中的Canvas API的探索
Canvas API 是H5中比較炫酷的一部分內容。可以通過它動態的生成和展示圖形、圖表、圖像以及動畫。下面我將學習一下Canvas API。
最后有書籍和源碼。
一、概述：
? 1.基本元素： ??
在網頁上使用canvas元素時，它會創建一塊矩形區域，默認為300px*150px (w*h),可以自定義具體大小和canvas元素的其他特性。
? 基本canvas元素：
? 在頁面加入canvas元素后，可以通過js腳本來控制它，可以在其中添加圖片、線條以及文字，也可以在里面繪圖，甚至可以加入高級動畫。
? ?使用canvas編程，首先要獲取其上下文（context）。接著在上下文中執行動作，最后將這些動作應用到上下文中。可以將canvas這種編輯方式想象成為數據庫事務：
開發人員先發起一個事務，然后執行某些操作，最后提交事務。
?2. canvas坐標
? ? ?canvas坐標從左上角開始，x軸延水平方向（按像素）向右延伸，y軸延垂直方向向下延伸。左上角坐標為x=0，y=0的點稱為原點
3.使用HTML5 canvas API
??
?效果：
?
? 實例：在canvas中繪制一條對角線
?html代碼：
js代碼：
效果：
從上面實例我們可知方法moveTo和lineTo并不畫線，而是在結束canvas操作的時候，通過調用stroke方法來完成線條的繪制。
很多對上下文的操作不會立即顯示到頁面上。beginPath、moveTo、lineTo，這些函數不會直接修改canvas的展示結果。canvas中很多用于設置樣式和外觀的函數也同樣不會直接修改顯示結果。只有當對路徑應用繪制（stroke）或者填充（fill）方法時，結果才會顯示出來。否則只有在顯示圖像、顯示文本或者繪制、填充和清除矩形框的時候，canvas才會馬上更新。
?二、入門操作
1.通過變換（transformation）作圖
變換是實現復雜canvas操作的最好方式
關于可重用代碼的一條重要建議：一般繪制都應從原點開始，應用變換（縮放、平移、旋轉），然后不斷修改代碼，直至達到希望的效果。
利用變換畫一個和上面一樣的實例：
代碼：
效果：
說明：
? 保存尚未修改的上下文context,這樣即使進行了繪制和變換操作，也能恢復到初始狀態。如果不保存，那么在進行變換操作后，其影響會帶到后續操作中，所以在變換前保存context，可以方便恢復原來的狀態。
2.路徑
H5 canvas API中路徑代表你希望呈現的任何形狀，如果想要在canvas上繪制任意形狀的圖形，需要多關注路徑API。
不論繪制何種圖形，第一個需要調用的就是就是beginPath，它用來通知canvas開始繪制一個新的圖形了。beginPath的最大用處是canvas需要根據此來計算圖形的內部和外部范圍。以便完成后續的續邊和填充。
幾個簡單的context路徑函數：
moveTo（x,y）:不繪制，只是將當前位置移動到新的目標坐標（x,y）。
lineTo（x,y）:不僅將當前位置移動到新的目標坐標（x,y）而且在兩個坐標之間畫一條直線。
不管調用他們哪一個方法，都不能真正的畫出圖形。我們只是在定義路徑的位置。
實例：松樹樹冠的畫法：
代碼：
html代碼：
js代碼
效果：
?3.樣式
通過修改context的屬性，來為圖形增加樣式
線條樣式
增加線條樣式后的代碼
效果：
?繼續增加樣式：填充樣式
增加填充樣式后的代碼：
效果：
?4.曲線的繪制
利用曲線繪制一條路
js代碼
效果：
說明：?quadraticCurveTo函數繪制曲線的起點是當前坐標，帶有兩組參數（x,y）第二組是指曲線的終點，第一組代表控制點。所謂的控制點位于曲線的旁邊，不是曲線之上，其作用相當于對曲線產生一個拉力。通過調整控制點的位置，就可以改變曲線的曲率。在右上方畫一條一樣的曲線，以形成一條路。然后，像之前，描邊樹冠把這條路繪制到canvas上
5.插入圖片
? 在canvas中插入圖片非常簡單。可以通過修正層為圖片添加印章、拉伸圖片或者修改圖片。并且圖片會成為canvas上的焦點。用H5 canvas API內置的幾個簡單命令，可以輕松地為canvas添加圖片內容。
注意： 圖片增加了canvas操作的復雜度，必須等到圖片加載完之后，才能對其進行操作，瀏覽器通常在頁面腳本執行的同時異步加載圖片。如果試圖在圖片未加載之前就將其呈現到canvas上，那么canvas將不會顯示任何圖片。因此需要注意，在呈現之前，需要確保圖片已經加載完畢。
測試代碼，僅供參看
?6.漸變
漸變是指在顏色集上使用逐步抽樣算法，并將結果應用于描邊樣式和填充樣式中。
使用漸變的三個步驟：1) 創建漸變對象
? ? ? ? ? ? ? ? ? ? ? ? ? ? 2)為漸變對象設計顏色，指明過渡方式
? ? ? ? ? ? ? ? ? ? ? ? ? ? 3)在context上為填充樣式或者描邊樣式設置漸變。
我們可以將漸變看成是顏色沿著一條線進行緩慢的變化。例如，如果為漸變對象提供了A、B兩個點。不論是繪制還是填充，只要從A移動到B，就會帶來顏色的變化。
?漸變示例：
效果對比:
? ? ? ? ? ? ?漸變前 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?漸變后（樹干有了光亮）
由上例可知，要設置顯示哪種顏色，在漸變對象上使用addColorStop函數即可，這個函數允許指定兩個參數:顏色和偏移量。顏色是指開發人員希望在偏移位置描邊或者填充時所使用的顏色。偏移量是一個0.0-1.0之間的數值。代表沿著漸近線漸變的距離有多遠。
除了上面提到的線性漸變以外，H5 canvas API還提供了放射性漸變，放射性漸變就是顏色會介于兩個指定圓間的錐形區域平滑變化。放射性漸變和線性漸變使用的顏色終止點是一樣的
實例：
createRadialGradient(x0,y0,r0,x1,y1,r1).代碼中前三個參數代表以（x0,y0）為圓心，r0為半徑的圓，后三個參數代表以（x1,y1）為圓心,r1為半徑的圓。漸變會在兩個圓中間的區域出現。
?6.背景圖
?下面我們用背景圖來填充小路
?
效果圖：
?我們先設置了context上的strokeStyle屬性，把調用context.createPattern的返回值賦給該屬性，注意，圖片必須提前加載完畢 ?
context.createPattern的第二個參數是重復性標記
7.縮放canvas對象
效果圖：
說明：scale函數帶有兩個參數分別代表在x,y上兩個維度的值。
7.變換
旋轉：
context.rotate(1.57);//旋轉角度參數以弧度為參數
變換綜合：
?
效果：顯示陰影
8.canvas 文本
H5 canvas API提供了強大的文本支持，操作文本的方式，與操作其他路徑對象的方式相同：可以描繪文本輪廓和填充文本內部，同時，能夠應用于其他圖形的變換和樣式，都能應用于文本。
context對象的文本繪制功能由兩個函數組成：
fillText(text,x,y,maxwidth);
strokeText(text,x,y,maxwidth);
兩個函數參數完全相同，必選參數包括文本參數和坐標參數，其中maxwidth為可選參數，用于限制字體大小，他會將文本字體強制收縮到指定尺寸。
?
?
效果：
9.像素數據 （尚未深入）
canvas API最有用的特性之一是允許開發人員直接訪問canvas底層像素數據，這種數據訪問是雙向的：一方面可以以數值數組形式獲取像素數據，另一方面可以修改數組的值以將其應用于canvas上。可以直接調用像素數據來控制canvas.這要歸功于canvas API內置的三個函數。
第一個是context.getImageData(sx,sy,sw,sh);這個函數返回當前canvas狀態，并以數值數組的方式顯示。
?
?
小結：
H5的 canvas API具有強大的功能，利用它可以直接修改web應用的外觀。需要注意的是，繪制過程中通常以原點為起點，展現圖像之前要先完成加載，使用外部來源的圖片時，需要留心。我們這里只介紹了一些canvas基礎知識，作為一個對h5了解的入門吧。
?
?附上下載鏈接：
canvas源碼（自己）：
鏈接：http://pan.baidu.com/s/1o8u93eE 密碼：zfm6
H5書籍：
? ? ?鏈接：http://pan.baidu.com/s/1gfqebqN 密碼：bgdo
? ? 書籍源碼：鏈接：http://pan.baidu.com/s/1qYD2mxm 密碼：nzwr
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
??
?
轉載于:https://www.cnblogs.com/xiaoduc-org/p/5795925.html
總結
以上是生活随笔為你收集整理的关于H5中的Canvas API的探索的全部內容，希望文章能夠幫你解決所遇到的問題。
