anvas元素用來支持在網頁上繪制圖形圖像

以前在網頁中進行交互繪圖是很困難的（需要依賴額外的第三方插件），而引入的Canvas特性使得作者可以很容易的在網頁上繪制各種圖形和圖像。

Canvas提供了腳本（JavaScript）應用接口，我們可以使用JS代碼來操作畫布，添加各種圖形以及實現用戶交互。這些特性使得HTML5在開發網頁游戲和一些復雜的網頁動畫上變得更加方便。

比如下面這個例子，使用Canvas實現了簡單的在線畫板功能，你可以直接在網頁上繪制線條：

實例可訪問：http://www.ikinsoft.com/3ddemo/Canvas.html

效果圖如下：

實際上Canvas規范包含兩個部分，一個是HTML5新引入的canvas元素，還有更為關鍵的2D渲染上下文。實際上前者只是一個容器，后者才是真正繪圖的地方。它包含繪圖和圖形操作所需要的全部方法和豐富功能。 強調一下：繪圖是在2D渲染上下文中進行的，而不是在canvas元素中進行。可以通過canvas元素訪問和顯示2D渲染上下文。

canvas元素的語法很簡單，除了id和class外，還有兩個和容器尺寸相關的屬性：寬和高。

<canvas id="myCanvas" height="500" width="500"></canvas>

我們接下來先搞清楚2D渲染上下文的用法。

畫布圖形實際上是繪制在2D渲染上下文里

canvas元素并非Canvas中最強大的部分，真正的關鍵部分是2D渲染上下文，這是你真正繪制圖形的地方。canvas元素的用途只是作為2D渲染上下文的包裝器，它包含繪圖和圖形操作所需要的全部方法和豐富功能。理解這一點是很重要的，強調一下：繪圖是在2D渲染上下文中進行的，而不是在canvas元素中進行。可以通過canvas元素訪問和顯示2D渲染上下文。

坐標系統

2D渲染上下文是一種基于屏幕的標準繪圖平臺。與其他的2D平臺類似，它采用平面的笛卡兒坐標系統，左上角為原點（0,0）。向右移動時，x坐標值會增加；向下移動時，y坐標值會增加。如果你想把圖形繪制到正確的位置上，一定要理解這個坐標系統。

坐標系統的1個單位通常相當于屏幕的1個像素，所以位置（24，30）是向右24像素和向下30像素的位置。有時候坐標系統的1個單位相當于2個像素（例如，在一些高分辨率顯示器中），但是一般的經驗法則是1個坐標單位等于1個屏幕像素。

訪問2D渲染上下文

我們先創建只有一個空白canvas元素的簡單HTML網頁：

<canvas id="myCanvas" width="200" height="200">

<!-- Insert fallback content here -->

</canvas>

在這個例子中，我們將這個canvas元素賦值給一個變量，然后再通過調用getContext方法將得到的2D渲染上下文賦給另一個變量。 必須強調一點，由于我們使用了jQuery，所以需要調用get方法才能訪問DOM中的canvas元素，然后才能夠訪問Canvas的getContext方法。

有了包含2D渲染上下文的變量之后，就可以開始繪制圖形了。在上下文變量聲明語句之后添加下面這行代碼：

context.fillRect(0,0,200,200);

完整的JS代碼如下：

上述代碼將在畫布上繪制如下的一個黑色矩形，從坐標（0，0）處開始，長寬均為200px：

這個矩形是黑色的，因為Canvas所繪制元素的默認顏色是黑色。