前言
canvas是什麼？
<canvas></canvas>是HTML5出現的新標籤，用於圖形的繪製，通過腳本 (通常是JavaScript)來完成。
<canvas> 標籤只是圖形容器，您必須使用腳本來繪製圖形。
你可以通過多種方法使用Canva繪製路徑,盒、圓、字符以及添加圖像。
像所有的dom對象一樣它有自己本身的屬性、方法和事件，其中就有繪圖的方法，js能夠調用它來進行繪圖 。
<canvas> 元素本質上是在瀏覽器中提供了一塊可繪製的區域，Javascript代碼可以訪問該區域，通過一套完整的API進行二維圖像繪製。另外，如果顯卡硬件支持3D圖形功能，還可以使用canvas繪製3D圖形。
canvas的歷史
這個 HTML 元素是爲了客戶端矢量圖形而設計的。它自己沒有行爲，但卻把一個繪圖 API 展現給客戶端 JavaScript 以使腳本能夠把想繪製的東西都繪製到一塊畫布上。
<canvas> 最早由Apple引入WebKit，用於Mac OS X 的 Dashboard，後來又在Safari和Google Chrome被實現。 基於Gecko 1.8的瀏覽器,比如 Firefox 1.5， 同樣支持這個元素。<canvas> 元素是WhatWG Web applications 1.0規範的一部分,也包含於HTML 5中。
canvas各瀏覽器兼容性
<canvas> 元素不被一些老的瀏覽器所支持，但是所有的主流瀏覽器的新近版本都支持。
查看兼容性網址：http://www.caniuse.com/#search=canvas
標記和 SVG 以及 VML 之間的差異
標記和 SVG 以及 VML 之間的一個重要的不同是， 有一個基於 JavaScript 的繪圖 API，而 SVG 和 VML 使用一個 XML 文檔來描述繪圖。
這兩種方式在功能上是等同的，任何一種都可以用另一種來模擬。從表面上看，它們很不相同，可是，每一種都有強項和弱點。例如，SVG 繪圖很容易編輯，只要從其描述中移除元素就行。
要從同一圖形的一個 標記中移除元素，往往需要擦掉繪圖重新繪製它。
如何使用 標記繪圖
大多數 Canvas 繪圖 API 都沒有定義在 元素本身上，而是定義在通過畫布的getContext() 方法 獲得的一個“繪圖環境”對象上。
Canvas API 也使用了路徑的表示法。但是，路徑由一系列的方法調用來定義，而不是描述爲字母和數字的字符串，比如調用 beginPath() 和 arc() 方法。
一旦定義了路徑，其他的方法，如 fill()，都是對此路徑操作。繪圖環境的各種屬性，比如 fillStyle，說明了這些操作如何使用。
註釋：Canvas API 非常緊湊的一個原因上它沒有對繪製文本提供任何支持。要把文本加入到一個 圖形，必須要麼自己繪製它再用位圖圖像合併它，或者在 上方使用 CSS 定位來覆蓋 HTML 文本。
開始之前
使用 <canvas> 元素不是非常難但你需要一些基本的HTML和JavaScript知識。Canvas 的默認大小爲300像素×150像素（寬×高，像素的單位是px）。但是，可以使用HTML的高度和寬度屬性來自定義Canvas 的尺寸。爲了在 Canvas 上繪製圖形，我們使用一個JavaScript上下文對象，它能動態創建圖像（ creates graphics on the fly）。