什么是Canvas

<canvas> 是一個(gè)新的 HTML 元素，這個(gè)元素在 HTML5 中被定義。這個(gè)元素通?？梢员挥脕?lái)在 HTML 頁(yè)面中通過(guò) JavaScript 進(jìn)行繪制圖形、合成圖像等等操作，也可以用來(lái)做一些動(dòng)畫(huà)。當(dāng)然，目前 HTML5 規(guī)范還在草稿階段，正式發(fā)布也許要等到2010年，不過(guò)現(xiàn)在已經(jīng)有不少瀏覽器已經(jīng)支持了部分 HTML5 規(guī)范。目前支持 canvas 元素的瀏覽器有 Firefox 3+、Safari 4、Chrome 2.0+ 等，因此，在運(yùn)行本頁(yè)中的例子時(shí)，請(qǐng)確保你使用的是上述瀏覽器之一。

盡管在 Mozilla 已經(jīng)有不少關(guān)于 Canvas 的教程，我還是決定把自己的學(xué)習(xí)過(guò)程記錄下來(lái)。如果覺(jué)得我寫的不夠明白，那么你可以在參考資料中找到 Mozilla 網(wǎng)站上 Canvas 教程的鏈接。

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

開(kāi)始使用 Canvas

使用 Canvas 很簡(jiǎn)單，與使用其他 HTML 元素一樣，只需要在頁(yè)面中添加一個(gè) <canvas> 標(biāo)簽即可：

當(dāng)然，這樣只是簡(jiǎn)單的創(chuàng)建了一個(gè) Canvas 對(duì)象而已，并沒(méi)有對(duì)它進(jìn)行任何操作，這個(gè)時(shí)候的 canvas 元素看上去與 div 元素是沒(méi)什么區(qū)別的，在頁(yè)面上什么都看不出來(lái)：）
另外，canvas 元素的大小可以通過(guò) width 與 height 屬性來(lái)指定，這與 img 元素有點(diǎn)相似。
Canvas 的核心：Context
前面說(shuō)到可以通過(guò) JavaScript 來(lái)操作 Canvas 對(duì)象來(lái)進(jìn)行繪制圖形、合成圖像等操作，這些操作并不是通過(guò) Canvas 對(duì)象本身來(lái)進(jìn)行的，而是通過(guò) Canvas 對(duì)象的一個(gè)方法 getContext 獲取 Canvas 操作上下文來(lái)進(jìn)行。也就是說(shuō)，在后面我們使用 Canvas 對(duì)象的過(guò)程中，都是與 Canvas 對(duì)象的 Context 打交道，而 Canvas 對(duì)象本身可以用來(lái)獲取 Canvas 對(duì)象的大小等信息。
要獲取 Canvas 對(duì)象的 Context 很簡(jiǎn)單，直接調(diào)用 canvas 元素的 getContext 方法即可，在調(diào)用的時(shí)候需要傳遞一個(gè) Context 類型參數(shù)，目前可以用的并且是唯一可以用的類型值就是 2d：

Firefox 3.0.x 的尷尬

Firefox 3.0.x 雖然支持了 canvas 元素，但是并沒(méi)有完全按照規(guī)范來(lái)實(shí)現(xiàn)，規(guī)范中的 fillText、measureText 兩個(gè)方法在 Firefox 3.0.x 中被幾個(gè) Firefox 特有的方法代替，因此在 Firefox 3.0.x 中使用 Canvas 時(shí)需要先 fix 這個(gè)幾個(gè)方法在不同瀏覽器中的差別。

下面這代碼取自 Mozilla Bespin 項(xiàng)目，它修正了 Firefox 3.0.x 中 Canvas 的 Context 對(duì)象與 HTML5 規(guī)范不一致的地方：

注意：到 Opera 9.5 為止，Opera 還不支持 HTML5 規(guī)范中 Canvas 對(duì)象的 fillText 以及其相關(guān)方法和屬性。

Hello, Canvas!

在對(duì) Canvas 進(jìn)行了一些初步了解后，開(kāi)始來(lái)寫我們的第一個(gè) Canvas 程序，聞名的 HelloWorld 的又一個(gè)分支“Hello, Canvas”：

運(yùn)行示例，Canvas 對(duì)象所在區(qū)域顯示出“Hello, World!”，這正是代碼中 ctx.fillText("Hello, World!", 20, 20); 的作用。

fillText 以及相關(guān)屬性

fillText 方法用來(lái)在 Canvas 中顯示文字，它可以接受四個(gè)參數(shù)，其中最后一個(gè)是可選的：

void fillText(in DOMString text, in float x, in float y, [Optional] in float maxWidth);

其中 maxWidth 表示顯示文字時(shí)最大的寬度，可以防止文字溢出，不過(guò)我在測(cè)試中發(fā)現(xiàn)在 Firefox 與 Chomre 中指定了 maxWidth 時(shí)也沒(méi)有任何效果。

在使用 fillText 方法之前，可以通過(guò)設(shè)置 Context 的 font 屬性來(lái)調(diào)整顯示文字的字體，在上面的示例中我使用了“20pt Arial”來(lái)作為顯示文字的字體，你可以自己設(shè)置不同的值來(lái)看具體的效果。

結(jié)束

暫時(shí)就到這里了，我會(huì)一邊看規(guī)范一邊寫這個(gè)系列：）

參考資料

1. HTML5的Canvas，腳本語(yǔ)言的新舞臺(tái), hred

2. The Canvas Element, WHATWG

3. Canvas Tutorial 中文, Mozilla

4. Canvas Tutorial 英文, Mozilla

5. canvas support in Opera, Opera

最新評(píng)論