點評：什麼是Canvas<canvas>是一個新的HTML元素，這個元素在HTML5中被定義。這個元素通常可以被用來在HTML頁面中通過JavaScript進行繪製圖形、合成圖像等等操作，也可以用來做一些動畫。當然，目前HTML5
什麼是Canvas
<canvas>是一個新的HTML元素，這個元素在HTML5中被定義。這個元素通常可以被用來在HTML頁面中通過JavaScript進行繪製圖形、合成圖像等等操作，也可以用來做一些動畫。當然，目前HTML5規範還在草稿階段，正式發布也許要等到2010年，不過現在已經有不少瀏覽器已經支持了部分HTML5規範。目前支持canvas元素的瀏覽器有Firefox3+、Safari4、Chrome2.0+等，因此，在運行本頁中的例子時，請確保你使用的是上述瀏覽器之一。
儘管在Mozilla已經有不少關於Canvas的教程，我還是決定把自己的學習過程記錄下來。如果覺得我寫的不夠明白，那麼你可以在參考資料中找到Mozilla網站上Canvas教程的鏈接。
另外，可以在這裡找到一些有趣的Canvas示例。
開始使用Canvas
使用Canvas很簡單，與使用其他HTML元素一樣，只需要在頁面中添加一個<canvas>標籤即可：
<canvas></canvas>
當然，這樣只是簡單的創建了一個Canvas對象而已，並沒有對它進行任何操作，這個時候的canvas元素看上去與div元素是沒什麼區別的，在頁面上什麼都看不出來：）
另外，canvas元素的大小可以通過width與height屬性來指定，這與img元素有點相似。
Canvas的核心：Context
前面說到可以通過JavaScript來操作Canvas對象來進行繪製圖形、合成圖像等操作，這些操作並不是通過Canvas對象本身來進行的，而是通過Canvas對象的一個方法getContext獲取Canvas操作上下文來進行。也就是說，在後面我們使用Canvas對象的過程中，都是與Canvas對象的Context打交道，而Canvas對象本身可以用來獲取Canvas對象的大小等信息。
要獲取Canvas對象的Context很簡單，直接調用canvas元素的getContext方法即可，在調用的時候需要傳遞一個Context類型參數，目前可以用的並且是唯一可以用的類型值就是2d：
Firefox3.0.x的尷尬
Firefox3.0.x雖然支持了canvas元素，但是並沒有完全按照規範來實現，規範中的fillText、measureText兩個方法在Firefox3.0.x中被幾個Firefox特有的方法代替，因此在Firefox3.0.x中使用Canvas時需要先fix這個幾個方法在不同瀏覽器中的差別。
下面這代碼取自MozillaBespin項目，它修正了Firefox3.0.x中Canvas的Context對象與HTML5規範不一致的地方：
注意：到Opera9.5為止，Opera還不支持HTML5規範中Canvas對象的fillText以及其相關方法和屬性。
Hello,Canvas!
在對Canvas進行了一些初步了解後，開始來寫我們的第一個Canvas程序，聞名的HelloWorld的又一個分支Hello,Canvas：
運行示例，Canvas對象所在區域顯示出Hello,World!，這正是代碼中ctx.fillText(Hello,World!,20,20);的作用。
fillText以及相關屬性
fillText方法用來在Canvas中顯示文字，它可以接受四個參數，其中最後一個是可選的：
voidfillText(inDOMStringtext,infloatx,infloaty,[Optional]infloatmaxWidth);
其中maxWidth表示顯示文字時最大的寬度，可以防止文字溢出，不過我在測試中發現在Firefox與Chomre中指定了maxWidth時也沒有任何效果。
在使用fillText方法之前，可以通過設置Context的font屬性來調整顯示文字的字體，在上面的示例中我使用了20ptArial來作為顯示文字的字體，你可以自己設置不同的值來看具體的效果。
結束
暫時就到這裡了，我會一邊看規範一邊寫這個系列：）
參考資料
1.HTML5的Canvas，腳本語言的新舞台,hred
2.
3.CanvasTutorial中文,Mozilla
4.CanvasTutorial英文,Mozilla
5.canvassupportinOpera,Opera