還記得在過去的Web前端開發中，如果你需要繪圖或者生成相關圖形的話，使用Flash可能是你唯一或者說最強大的實現方式，而在近些年的技術熱點HTML5標準中，（畫布）能夠更加方便的幫助你實現2D繪製圖形影象及其各種動畫效果功能。

首先我們先來了解一下什麼是HTML Canvas？

我們可以在HTML中使用屬性width和height來定義Canvas。但是實現Canvas的相關功能主要還依賴於Javascript實現，即HTML5 Canvas API。我們使用javascript來訪問和控制Canvas相關的區域，比如呼叫相關繪圖的方法，用來動態的生成需要的動畫或者圖形。

接下來我們來看看canvas的特性：

互動性：Canvas支援互動，可以很好的響應使用者的操作，我們可以通過Javascript來監鍵盤，滑鼠，及其觸控裝置相關事件。

動 畫：任何被canvas繪製的圖形都可以新增動畫，簡單的彈跳球或者複雜的HTML5遊戲都可以實現

靈活性：開發人員可以使用Canvas來繪製任何的內容，比如，直線，圖形，文字，圖片等，可以包含動畫或者不包含。同時你可以新增音訊或者視訊瀏覽器支援：幾乎所有的現代瀏覽器都支援，並且被廣泛的各種裝置支援，例如，桌面，平板，智慧手機等等。

流行度：canvas目前很流行，很多的開發人員都使用它來開發類似遊戲或者繪圖類應用

web標準：只需要有瀏覽器就可以執行，而非flash或者silverlight，需要安裝相關的外掛

開發一次，任何瀏覽器都可以執行（當然，不包括老式瀏覽器）

可以使用免費擁有大量的開發工具及其類庫。

使用HTML5 Canvas我們能開發那些相關產品或者應用呢？

1 視覺化資料： 各類統計圖表，比如:百度的echart

2 場景秀：用Canvas實現動態的廣告效果能夠非常融洽的跨平臺執行。如:手機中微產品.在移動端相容性很好。

3 遊戲：canvas在基於Web的影象顯示方面比Flash更加立體、更加精巧，canvas成為HTML5小遊戲開發首選。現階段h5做遊戲,營業方式不是很明確. 25 超棒的 HTML5 Canvas 遊戲。

4 其他可嵌入網站的內容 (多用於活動頁面、特效)：類似圖表、音訊、視訊，還有許多元素能夠更好地與Web融合，並且不需要任何外掛。

5 趨勢=> 模擬器： 無論從視覺效果還是核心功能方面來說，模擬器產品可以完全由JavaScript來實現。模擬真實硬體環境,如移動端各種型別手機.

6 趨勢=> 遠端計算機控制： Canvas可以讓開發者更好地實現基於Web的資料傳輸，構建一個完美的視覺化控制介面。

7 趨勢=> 圖形編輯器： Photoshop圖形編輯器將能夠100%基於Web實現。

如何使用HTML5 Canvas？

使用HTML5 canvas其實非常簡單， 每一個canvas都擁有一個上下文（context）。使用它你可以來呼叫相關的畫布方法。

<canvas id="mycanvas" width="500" height ="400">

<p>您的瀏覽器不支援HTML5 Canvas</p>

</canvas>

以上程式碼我們在HTML中添加了一個canvas標籤，如果瀏覽器不支援canvas，會顯示<p>標籤的內容，當然，如果你需要支援老式瀏覽器你也可以使用flash或者其它方法來做一個替代的解決方案。

var canvas = document.getElementById('mycanvas'),

context = canvas.getContext('2d');

以上程式碼我們通過canvas取到2D的context。

在HTML5 Canvas的2D結構中，座標（0,0）在左上方，這和傳統的座標不太一樣。大家需要注意一下，如下圖所示：

下面來說一下canvas的API：

canvas的主要屬性和方法：

save():儲存當前環境的狀態

restore():返回之前儲存過的路徑狀態和屬性

createEvent()

getContext():返回一個物件，指出訪問繪圖功能必要的API

toDateURL():返回canvas影象的URL

顏色、樣式和陰影屬性和方法：

fillStyle:設定或返回用於填充繪畫的顏色、漸變或模式

strokeStyle:設定或返回用於筆觸的顏色、漸變或模式

shadowColor:設定或返回用於陰影的顏色

shadowBlur:設定或返回用於陰影的模糊級別

shadowOffsetX:設定或返回陰影距形狀的水平距離

shadowOffsetY:設定或返回陰影距形狀的垂直距離

createLinearGradient():建立線性漸變（用在畫布內容上）

createPattern():在指定的方向上重複指定的元素

createRadialGradient():建立放射狀/環形的漸變（用在畫布內容上）

addColorStop():規定漸變物件中的顏色和停止位置

線條樣式屬性和方法

lineCap:設定或返回線條的結束端點樣式

lineJoin:設定或返回兩條線相交時，所建立的拐角型別

lineWidth:設定或返回當前的線段寬度

miterLimit:設定或返回最大斜接長度

Canvas的API-路徑方法

fill():填充當前繪圖(路徑)

stroke():繪製已定義的路徑

beginPath():起始一條路徑，或重置當前路徑

moveTo():把路徑移動到畫布中的指定點，不建立線條

closePath():建立從當前點回到起始點的路徑

lineTo():新增一個新點，建立從該點到最後指定點的線條

clip():從原始畫布剪下任意形狀和尺寸的區域

quadraticCurveTo():建立二次貝塞爾曲線

bezierCurveTo():建立三次貝塞爾曲線

arc():建立弧/曲線（用於建立圓形或部分圓）

arcTo():建立兩切線之間的弧/曲線

isPointInPath():如果指定的點位於當前路徑中，返回布林值

Canvas的API-轉換方法

scale():縮放當前繪圖至更大或更小

rotate():旋轉當前繪圖

translate():重新對映畫布上的（0，0）位置

transform():替換繪圖的當前轉換矩陣

setTransform():將當前轉換重置為單位矩陣，然後執行transform（）

Canvas的API-文字屬性和方法

font:設定或返回文字內容的當前字型屬性

textAlign:設定或返回文字內容的當前對齊方式

textBaseline:設定或返回在繪製文字時使用的的當前文字基線

fillText():在畫布上繪製"被填充的"文字

strokeText():在畫布上繪製文字（無填充）

measureText():返回包含指定文字寬度的物件

Canvas的API-影象繪製方法

drawImage():向畫布上繪製圖像、畫布或視訊

Canvas的API-畫素操作方法和屬性

width:返回ImageData物件的寬度

height:返回ImageData物件的高度

data:返回一個物件，其包含指定的ImageData物件的影象資料

createImageData():建立新的、空白的I馬哥Data物件

getImageData():返回ImageData物件，該物件為畫布上指定的矩形複製畫素資料

putImageData():把影象資料（從指定的ImageData物件）放回畫布上

Canvas的API-影象合成屬性

globalAlpha:設定或返回繪圖的當前alpha或透明值

globalCompositeOperation:設定或返回新影象如何繪製到已有的影象上

快速高效的建立HTML5畫布圖形？

直接使用Canvas來繪製圖形相對來說比較乏味並且麻煩，所以在現代的HTML5 Canvas中我們使用一些現成的第三方類庫幫助我們多快好省的實現圖形繪製的功能：Echart.js