點評:什麼是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