什么是Canvas
<canvas> 是一個新的 HTML 元素，這個元素在 HTML5 中被定義。這個元素通常可以被用來在 HTML 頁面中通過 JavaScript 進行繪制圖形、合成圖像等等操作，也可以用來做一些動畫。當然，目前 HTML5 規(guī)范還在草稿階段，正式發(fā)布也許要等到2010年，不過現(xiàn)在已經(jīng)有不少瀏覽器已經(jīng)支持了部分 HTML5 規(guī)范。目前支持 canvas 元素的瀏覽器有 Firefox 3+、Safari 4、Chrome 2.0+ 等，因此，在運行本頁中的例子時，請確保你使用的是上述瀏覽器之一。
盡管在 Mozilla 已經(jīng)有不少關(guān)于 Canvas 的教程，我還是決定把自己的學習過程記錄下來。如果覺得我寫的不夠明白，那么你可以在參考資料中找到 Mozilla 網(wǎng)站上 Canvas 教程的鏈接。
另外，可以在這里找到一些有趣的 Canvas 示例。
開始使用 Canvas
使用 Canvas 很簡單，與使用其他 HTML 元素一樣，只需要在頁面中添加一個 <canvas> 標簽即可：
<canvas id="screen" width="400" height="400"></canvas>
當然，這樣只是簡單的創(chuàng)建了一個 Canvas 對象而已，并沒有對它進行任何操作，這個時候的 canvas 元素看上去與 div 元素是沒什么區(qū)別的，在頁面上什么都看不出來：）
另外，canvas 元素的大小可以通過 width 與 height 屬性來指定，這與 img 元素有點相似。
Canvas 的核心：Context
前面說到可以通過 JavaScript 來操作 Canvas 對象來進行繪制圖形、合成圖像等操作，這些操作并不是通過 Canvas 對象本身來進行的，而是通過 Canvas 對象的一個方法 getContext 獲取 Canvas 操作上下文來進行。也就是說，在后面我們使用 Canvas 對象的過程中，都是與 Canvas 對象的 Context 打交道，而 Canvas 對象本身可以用來獲取 Canvas 對象的大小等信息。
要獲取 Canvas 對象的 Context 很簡單，直接調(diào)用 canvas 元素的 getContext 方法即可，在調(diào)用的時候需要傳遞一個 Context 類型參數(shù)，目前可以用的并且是唯一可以用的類型值就是 2d：
提示：您可以先修改部分代碼再運行
Firefox 3.0.x 的尷尬
Firefox 3.0.x 雖然支持了 canvas 元素，但是并沒有完全按照規(guī)范來實現(xiàn)，規(guī)范中的 fillText、measureText 兩個方法在 Firefox 3.0.x 中被幾個 Firefox 特有的方法代替，因此在 Firefox 3.0.x 中使用 Canvas 時需要先 fix 這個幾個方法在不同瀏覽器中的差別。
下面這代碼取自 Mozilla Bespin 項目，它修正了 Firefox 3.0.x 中 Canvas 的 Context 對象與 HTML5 規(guī)范不一致的地方：
提示：您可以先修改部分代碼再運行
注意：到 Opera 9.5 為止，Opera 還不支持 HTML5 規(guī)范中 Canvas 對象的 fillText 以及其相關(guān)方法和屬性。
Hello, Canvas!
在對 Canvas 進行了一些初步了解后，開始來寫我們的第一個 Canvas 程序，聞名的 HelloWorld 的又一個分支“Hello, Canvas”：
提示：您可以先修改部分代碼再運行
運行示例，Canvas 對象所在區(qū)域顯示出“Hello, World!”，這正是代碼中 ctx.fillText("Hello, World!", 20, 20); 的作用。
fillText 以及相關(guān)屬性
fillText 方法用來在 Canvas 中顯示文字，它可以接受四個參數(shù)，其中最后一個是可選的：
void fillText(in DOMString text, in float x, in float y, [Optional] in float maxWidth);
其中 maxWidth 表示顯示文字時最大的寬度，可以防止文字溢出，不過我在測試中發(fā)現(xiàn)在 Firefox 與 Chomre 中指定了 maxWidth 時也沒有任何效果。
在使用 fillText 方法之前，可以通過設(shè)置 Context 的 font 屬性來調(diào)整顯示文字的字體，在上面的示例中我使用了“20pt Arial”來作為顯示文字的字體，你可以自己設(shè)置不同的值來看具體的效果。
結(jié)束
暫時就到這里了，我會一邊看規(guī)范一邊寫這個系列：）
參考資料
1. HTML5的Canvas，腳本語言的新舞臺, hred
2. The Canvas Element, WHATWG
3. Canvas Tutorial 中文, Mozilla
4. Canvas Tutorial 英文, Mozilla
5. canvas support in Opera, Opera
