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

2024-08-26 00:15:58

字體：大中小

來源：轉載

供稿：網友

點評：什么是Canvas<canvas> 是一個新的 HTML 元素，這個元素在 HTML5 中被定義。這個元素通?？梢员挥脕碓?nbsp;HTML 頁面中通過 JavaScript 進行繪制圖形、合成圖像等等操作，也可以用來做一些動畫。當然，目前 HTML5

什么是Canvas

<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> 標簽即可：

復制代碼

代碼如下:

當然，這樣只是簡單的創建了一個 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：

提示：您可以先修改部分代碼再運行

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”來作為顯示文字的字體，你可以自己設置不同的值來看具體的效果。