什么是canvas ？
Canvas是一個矩形區域的畫布，可以用JavaScript在上面繪畫。控制其每一個像素。
canvas 標簽使用 JavaScript 在網頁上繪制圖像，本身不具備繪圖功能。
canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
HTML5之前的web頁面只能用一些固定樣式的標簽：比如p、div、h1等，但有了canvas Web頁面可以可以豐富多彩。
<canvas> 標記由 Apple 在 Safari 1.3 Web 瀏覽器中引入。對 HTML 的這一根本擴展的原因在於，HTML 在 Safari 中的繪圖能力也為 Mac OS X 桌面的 Dashboard 組件所使用，並且 Apple 希望有一種方式在 Dashboard 中支持腳本化的圖形。
Firefox 1.5 和 Opera 9 都跟隨了 Safari 的引領。這兩個瀏覽器都支持 <canvas> 標記。
我們甚至可以在 IE 中使用 <canvas> 標記，並在 IE 的 VML 支持的基礎上用開源的 JavaScript 代碼（由 Google 發起）來構建兼容性的畫布。
<canvas> 的標准化的努力由一個 Web 瀏覽器廠商的非正式協會在推進，目前 <canvas> 已經成為 HTML 5 草案中一個正式的標簽。
canvas主要應用的領域
1.游戲：canvas在基於Web的圖像顯示方面比Flash更加立體、更加精巧，canvas游戲在流暢度和跨平台方面更牛。
2.可視化數據.數據圖表話，比如:echart
3.banner廣告：Flash曾經輝煌的時代，智能手機還未曾出現。現在以及未來的智能機時代，HTML5技術能夠在banner廣告上發揮巨大作用，用Canvas實現動態的廣告效果再合適不過。
4.未來=> 模擬器：無論從視覺效果還是核心功能方面來說，模擬器產品可以完全由JavaScript來實現。
5.未來=> 遠程計算機控制：Canvas可以讓開發者更好地實現基於Web的數據傳輸，構建一個完美的可視化控制界面。
6.未來=> 圖形編輯器：Photoshop圖形編輯器將能夠100%基於Web實現。
7. 其他可嵌入網站的內容(多用於活動頁面、特效)：類似圖表、音頻、視頻，還有許多元素能夠更好地與Web融合，並且不需要任何插件。
瀏覽器不兼容的處理
ie9以上才支持canvas, 其他chrome、ff、蘋果瀏覽器等都支持
只要瀏覽器兼容canvas，那么就會支持絕大部分api(個別最新api除外)
移動端的兼容情況非常理想，基本上隨便使用
2d的支持的都非常好，3d（webgl）ie11才支持，其他都支持
如果瀏覽器不兼容，最好進行友好提示
canvas坐標系
1.1 設置繪制起點(moveTo)
語法：ctx.moveTo(x, y);
* 解釋：設置上下文繪制路徑的起點。相當於移動畫筆到某個位置
* 參數：x,y 都是相對於 canvas盒子的最左上角。* 注意： ** 繪制線段前必須先設置起點，不然繪制無效。
1.1 繪制直線(lineTo)
* 語法：ctx.lineTo(x, y);
* 解釋：從x,y的位置繪制一條直線到起點或者上一個線頭點。
* 參數：x,y 線頭點坐標。
1.2 路徑開始和閉合
* 開始路徑：ctx.beginPath();
* 閉合路徑：ctx.closePath();
* 解釋：如果復雜路徑繪制，必須使用路徑開始和結束。閉合路徑會自動把最后的線頭和開始的線頭連在一起。
* beginPath: 核心的作用是將 不同繪制的形狀進行隔離，
每次執行此方法，表示重新繪制一個路徑,跟之前的繪制的墨跡可以進行分開樣式設置和管理。
1.3 描邊(stroke)
* 語法：ctx.stroke();
* 解釋：根據路徑繪制線。路徑只是草稿，真正繪制線必須執行stroke
1.4 填充(fill)
* 語法：ctx.fill();
* 解釋：填充，是將閉合的路徑的內容填充具體的顏色。默認黑色。
* 注意：交叉路徑的填充問題，“非零環繞原則”，順逆時針穿插次數決定是否填充。
以下是非0環繞原則的原理：
“非零環繞規則”是這么來判斷有自我交叉情況的路徑的：對於路徑中的任意給定區域，從該區域內部畫一條足夠長的線段，
使此線段的終點完全落在路徑范圍之外。