繪制圖有很多種方法，可以借助flash實現，也可以使用SVG和VML來繪圖。本章將要學習一種新的繪圖方法——使用Canvas元素，它是基於HTML5原生的繪圖功能。使用Canvas元素，可以繪制圖形，也可以實現動畫。它方便了使用Javascript腳本的前端開發人員，寥寥的豎行代碼，就可以在Canvas元素中實現各種圖形及動畫。本章將介紹如何使用Canvas元素來繪制一些簡單的圖形。
本章主要知識點如下：
·認識Canvas元素
·使用Canvas繪圖
·Canvas與JavaScript之間的互動
·利用Canvas實現網頁中的動畫

10.1 認識Canvas
HTML5的Canvas元素有一套繪圖API（即接口函數），自成體系。
JavaScript就是通過調用這些繪圖API來實現繪制圖形和動畫功能的。
10.1.01 Canvas的歷史
在HTML5以前的標準中，有一個缺陷，就是不能直接動態地在HTML頁面中繪制圖形。若要在頁面中實現繪圖，或者是非常復雜的頁面實現（使用大量的Javascript代碼），要麽借助第三方工具實現（如Flash、SVG、VML等）。這種做法無疑是把問題復雜化了。

在互聯網應用不斷發展中，頁面繪制使用的越來越多。
在未來的發展趨勢上，也需要HTML自己完成繪圖功能，
Canvas元素應運而生。
Canvas元素是為了客戶端矢量圖形而設計的。
它自己沒有行為，但卻把一個繪圖API展現給客戶端Javascript；使腳本能夠把想繪制的東西都繪制到一塊畫布上。Canvas的概念最初有蘋果公司提出，並在Safari1.3Web 瀏覽器中首次引入。隨後Firefox 1.4 和 Opera9兩款瀏覽器都開始支持Canvas繪圖。目前IE9以上版本也已經支持這項功能。Canvas的標準化正由一個Web瀏覽器廠商的非正式協會在推進，目前Canvas已經成為HTML5草案中一個正式的標簽。

10.1.02 Canvas與SVG,以及VML之間的差異
Canvas有一個基於Javascript的繪圖API,而SVG和VML使用一個XML文檔來描述繪圖。Canvas與SVG,以及VML的實現方式不同，但在實現上可以互相模擬。
Canvas有自己的優勢，由於不存儲文檔對象，性能較好。
但若要移除畫布裏的圖形元素，往往需要擦掉繪圖從新繪制它。

10.2 Canvas基本知識
在網頁上使用Canvas元素，像使用其他HTML標簽一樣簡單，然後利用JavaScript腳本調用繪圖API,繪制各種圖形。
Canvas擁有多種繪制路徑、矩形、圓形、字符，以及添加圖像的方法，還能夠實現動畫。

10.2.01 構建Canvas元素
Canvas元素是以標簽的形式應用到HTML頁面上的。在HTML頁面中放入：
<canvas></canvas>
不過Canvas畢竟是個新東西，很多舊瀏覽器都不支持。為了增加用戶體驗，可以提供替代文字，放在Canvas標簽中。例如：
<canvas>你的瀏覽器不支持該功能!</canvas>
當瀏覽器不支持Canvas時，標簽裏的文字就會顯示出來。跟其他HTML標簽一樣，Canvas標簽有一些共同的屬性：
<canvas id="canvas" width="200" height="200">你的瀏覽器不支持Canvas標簽功能</canvas>
其中，id屬性決定了Canvas標簽的唯一性，方便查找。width和height屬性分別決定了Canvas的寬和高，其數值代表了Canvas標簽內包含了多少像素。
Canvas標簽可以和其他標簽一樣應用CSS樣式表。如果在頭部的樣式表中添加如下樣式：
canvas{
border:1px solid #CCC;
}
可以使用CSS樣式來控制Canvas的寬和高，但Canvas內部的像素點還是根據Canvas自身的width和height屬性確定，默認是寬300像素，高是150像素。用CSS設置Canvas尺寸；只能體現Canvas占用的頁面空間，但是Canvas內部的繪圖像素還是由width和height屬性來決定的。這樣會導致整個Canvas內部的圖像變形。

10.2.02 使用JavaScript實現繪圖的流程
Canvas元素本身是沒有繪圖能力的。所有的繪制工作必須在Javascript中完成。前面講過，Canvas元素提供一套繪圖API。在開始繪圖之前，先要獲取Canvas元素的對象，再獲取一個繪圖上下文，接下來就可以使用繪圖API中豐富的功能了。
1.獲取Canvas對象
在繪圖之前，首先需要從頁面中獲取Canvas對象，通常使用document對象的getElementById()方法獲取。例如，以下代碼就是獲取id為“canvas”的Canvas對象。
var canvas = document.getElementById("canvas");
開發者還可以使用通過標簽名稱來獲取對象的getElementByTagName()方法。
2.創建二維的繪圖上下文對象。
Canvas對象包含了不同類型的繪圖API,還需要使用getContext()方法來獲取，接下來要使用的繪圖上下文對象。
var content=canvas.getContext("2d");
getContext對象是內建的HTML5對象，擁有<F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12>

10.3 使用Canvas繪圖
10.3.01 繪制矩形
10.3.02 繪制路徑
10.3.03 圖形組合
10.3.04 繪制曲線
10.3.05 使用圖像
10.3.06 剪切區域
10.3.07 繪制漸變
10.3.08 描邊屬性
10.3.09 模式
10.3.10 變換
10.3.11 使用文本
10.3.12 陰影效果
10.3.13 狀態保存與恢復
10.3.14 操作像素

利用canvas繪制圖形