什麼是Canvas
儘管在 Mozilla 已經有不少關於 Canvas 的教程,我還是決定把自己的學習過程記錄下來。如果你覺得我寫的不夠明白,那麼你可以在參考資料中找到 Mozilla 網站上 Canvas 教學的連結。
另外,可以在這裡找到一些有趣的 Canvas 範例。
開始使用 Canvas
使用 Canvas 很簡單,與使用其他 HTML 元素一樣,只需要在頁面中新增一個
Firefox 3.0.x 的尴尬
Firefox 3.0.x 虽然支持了 canvas 元素,但是并没有完全按照规范来实现,规范中的 fillText、measureText 两个方法在 Firefox 3.0.x 中被几个 Firefox 特有的方法代替,因此在 Firefox 3.0.x 中使用 Canvas 时需要先 fix 这个几个方法在不同浏览器中的差别。
下面这代码取自 Mozilla Bespin 项目,它修正了 Firefox 3.0.x 中 Canvas 的 Context 对象与 HTML5 规范不一致的地方:
注意:到 Opera 9.5 为止,Opera 还不支持 HTML5 规范中 Canvas 对象的 fillText 以及其相关方法和属性。
Hello, Canvas!
在对 Canvas 进行了一些初步了解后,开始来写我们的第一个 Canvas 程序,闻名的 HelloWorld 的又一个分支“Hello, Canvas”:
運行範例,Canvas 物件所在區域顯示出“Hello, World!”,這正是程式碼中 ctx.fillText("Hello, World!", 20, 20); 的功能。
fillText 以及相關屬性
fillText 方法用來在 Canvas 中顯示文字,它可以接受四個參數,其中最後一個是可選的:
void fillText(in DOMString text, in float x, in float y, [Optional] in float maxWidth); 其中 maxWidth 表示文字顯示時最大的寬度,可以防止文字溢出,不過我在測試中發現在 Firefox 與 Chomre 中指定了 maxWidth 時也沒有任何效果。 在使用 fillText 方法之前,可以透過設定 Context 的 font 屬性來調整顯示文字的字體,在上面的範例中我使用了「20pt Arial」來作為顯示文字的字體,而你可以自己設定不同的值來看具體的效果。
暫時就到這裡了,我會一邊看規範一邊寫這個系列:)
1. HTML5的Canvas,腳本語言的新舞台, hred
2. The Canvas Element, WHATWG
3. Canvas Tutorial 中文, Mozilla
4. Canvas Tutorial 英文, Mozilla
5. canvas support in Opera, Opera