HTML5 Canvas 起步(1) - 基本概念

什麼是Canvas

 是一個新的 HTML 元素，這個元素在 HTML5 中定義。這個元素通常可以用來在 HTML 頁面中透過 JavaScript 進行繪製圖形、合成影像等等操作，也可以用來做一些動畫。當然，目前 HTML5 規範還在草稿階段，正式發布也許要等到2010年，不過現在已經有不少瀏覽器已經支援了部分 HTML5 規格。目前支援 canvas 元素的瀏覽器有 Firefox 3+、Safari 4、Chrome 2.0+ 等，因此，在執行本頁的範例時，請確保你使用的是上述瀏覽器之一。

儘管在 Mozilla 已經有不少關於 Canvas 的教程，我還是決定把自己的學習過程記錄下來。如果你覺得我寫的不夠明白，那麼你可以在參考資料中找到 Mozilla 網站上 Canvas 教學的連結。

另外，可以在這裡找到一些有趣的 Canvas 範例。

開始使用 Canvas

使用 Canvas 很簡單，與使用其他 HTML 元素一樣，只需要在頁面中添加一個  標籤即可：

<canvas id="screen" width="400" height="400"></canvas>

當然，並沒有對它做任何操作，這時候的 canvas 元素看上去與 div 元素是沒什麼區別的，在頁面上什麼都看不出來：）
另外，canvas 元素的大小可以透過 width 與 height 屬性來指定，這與 img 元素有點相似。
Canvas 的核心：Context
前面說到可以透過 JavaScript 來操作 Canvas 物件來進行繪製圖形、合成影像等操作，這些操作並不是透過 Canvas 物件本身來進行的，而是透過 Canvas 物件的一個方法來獲取操作上下文來進行。也就是說，在後面我們使用 Canvas 物件的過程中，都是與 Canvas 物件的 Context 打交道，而 Canvas 物件本身可以用來取得 Canvas 物件的大小等資訊。
要取得 Canvas 物件的 Context 很簡單，而直接呼叫 canvas 元素的 getContext 方法即可，在呼叫的時候需要傳遞一個 Context 類型參數，目前可以用的且是唯一可以用的類型值就是 2d：在電話中

rrreox 3.0.x 的尷尬

Firefox 3.0.x 雖然支持了 canvas 元素，但是並沒有完全按照規範來實現，規範中的 fillText、measureText 兩個方法在 Firefox 3.0.x 中被幾個特有方法代替，  因此在 Firefox 3.0.x 中使用 Canvas 時需要先 fix 這個幾個方法在不同瀏覽器中的差異。

下面這程式碼取自 Mozilla Bespin 項目，它修正了 Firefox 3.0.x 中 Canvas 的 Context 物件與 HTML5 規範不一致的地方： 對象的fillText 以及其相關方法和屬性。

Hello, Canvas!

在對 Canvas 進行了一些初步了解後，開始來寫我們的第一個 Canvas 程序，聞名的 HelloWorld 的另一個分支「Hello, vasCanvas」：Can所在區域顯示出“Hello, World!”，這正是程式碼中 ctx.fillText("Hello, World!", 20, 20); 的功能。

fillText 以及相關屬性

fillText 方法用來在 Canvas 中顯示文字，它可以接受四個參數，其中最後一個是可選的：

void fillText DOMString text,

void fillText [Optional] in float maxWidth);

其中 maxWidth 表示文字時最大的寬度，可以防止文字溢出，不過我在測試中發現在 Firefox 與 Chomre 中指定了對maxWidth 時也沒有任何效果。

在使用 fillText 方法之前，可以透過設定 Context 的 font 屬性來調整顯示文字的字體，而在上面的範例中我使用了「20pt Arial」作為顯示文字的字體，你可以自己設定不同的值來看具體的效果。

 以上就是HTML5 Canvas 起步(1) - 基本概念的內容，更多相關內容請關注PHP中文網（www.php.cn）！