基礎知識導入
1、canvas是 HTML5 提供的一種新標籤。瀏覽器支持canvas則顯示邊框，不支持則顯示標籤裏的內容。
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
您的瀏覽器不支持 HTML5 canvas 標籤。
</canvas>
2、canvas是一個矩形區域的畫布，用於圖形的繪製，通過腳本 (通常是JavaScript)來完成，它只是圖形容器，本身不具備繪圖功能。
3、canvas 擁有多種繪製路徑，線、矩形、圓、文字以及添加圖像及背景。即我們可以在一張白紙上繪製的它都能做到。
canvas的應用領域
1、遊戲：canvas 在基於 Web 的圖像顯示方面比 Flash 更加立體、精巧，canvas 遊戲在流暢度和跨平臺方面更牛。
2、可視化數據：數據圖表，如echart、F2、G2 ...。
3、banner 廣告：用Canvas可實現動態的廣告效果。
4、模擬器：模擬器產品可以完全由 canvas 來實現，視覺效果上更加逼真模擬實際生活中的工具，進一步優化物聯網大環境下的使用體驗，降低使用者的學習成本。
5、構建完整的 canvas 移動化應用，未來=>遠程計算機控制：Canvas 可以讓開發者更好地實現基於 Web 的數據傳輸，構建一個完美的可視化控制界面。
6、圖形編輯器：目前已面世的，如：可視化組態編輯工具ht，完全基於canvas繪製。未來Photoshop能夠基於canvas在web端100%實現。
7、其他可嵌入網站的內容(多用於活動頁面、特效)：類似圖表、音頻、視頻，還有許多元素能夠更好地與 Web 融合，並且不需要任何插件。