HTML 5之前，要在HTML頁面上動態生成圖片，要麼在服務器端生成位圖後輸出到HTML頁面上顯示，要麼使用Flash等等第三方工具。HTML 5改變了這種局面，HTML 5新增了一個<canvas.../>元素，這個元素本身的功能比較有限，但通過該元素可以獲取一個CanvasRenderingContext2D對象，該對象是一個功能強大的繪圖API。
本篇文章將會介紹HTML 5新增的繪圖功能，包括繪製幾何圖形、繪製字符串、利用路徑來繪製複雜的集合圖形等。還會介紹圖形變換、圖形疊加、圖形填充等內容。
一、使用canvas元素
<canvas.../>元素只是繪製圖形的容器，必須使用JavaScript腳本來繪製圖形。
HTML 5頁面上定義<canvas.../>元素與定義其他普通元素並無任何不同，它除了可以指定id、style、class、hidden等通用屬性之外，還可以指定如下兩個屬性。
- height：該屬性設置畫布組件高度。
- width：該屬性設置畫布組件寬度。
在HTML 網頁上定義<canvas.../>元素之後，它只是一張“空白”的畫布，畫布上面一片空白，一無所有。爲了向<canvas.../>元素上繪圖，必須經過如下3步。
- 獲取
<canvas.../>元素對應的DOM對象，這是一個Canvas對象。 - 調用Canvas對象的getContext()方法，該方法返回一個CanvasRenderingContext2D對象，該對象即可繪製圖形。
- 調用CanvasRenderingContext2D對象的方法繪圖。
二、繪圖
1. canvas繪圖基礎：CanvasRenderingContext2D
每個<canvas.../>元素對應於一個Canvas對象，Canvas對象的getContext(String contextID)方法將會返回一個繪圖API，該方法需要一個字符串參數，目前該方法只支持“2d”字符串作爲參數，該方法將返回一個CanvasRenderingContext2D對象。
該對象提供瞭如下表所示的方法繪製各種圖形。
除了上表所示的各種方法之外，CanvasRenderingContext2D還允許直接修改它的系列屬性，這些屬性主要用於控制各種繪圖風格。CanvasRenderingContext2D提供的各種屬性如下表所示。
在Canvas提供的繪製方法中還用到了一個API：Path，一個Path代表任意多條直線連接而成的任意圖形，當Canvas根據Path繪製時，它可以繪製出任意的形狀。
