欢乐颂第一季,完结小说排行榜

主頁(yè) > 知識(shí)庫(kù) > HTML5 Canvas 起步(1) - 基本概念

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

什么是Canvas

<canvas> 是一個(gè)新的 HTML 元素，這個(gè)元素在 HTML5 中被定義。這個(gè)元素通?？梢员挥脕碓?nbsp;HTML 頁(yè)面中通過 JavaScript 進(jìn)行繪制圖形、合成圖像等等操作，也可以用來做一些動(dòng)畫。當(dāng)然，目前 HTML5 規(guī)范還在草稿階段，正式發(fā)布也許要等到2010年，不過現(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í)過程記錄下來。如果覺得我寫的不夠明白，那么你可以在參考資料中找到 Mozilla 網(wǎng)站上 Canvas 教程的鏈接。

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

開始使用 Canvas

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

復(fù)制代碼

代碼如下:

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

提示：您可以先修改部分代碼再運(yùn)行

Firefox 3.0.x 的尷尬

Firefox 3.0.x 雖然支持了 canvas 元素，但是并沒有完全按照規(guī)范來實(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ī)范不一致的地方：

提示：您可以先修改部分代碼再運(yùn)行

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

Hello, Canvas!

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

<canvas id="screen" width="400" height="400"></canvas> <script type="text/javascript"> (function() { var canvas = document.getElementById("screen"); var ctx = fixContext(canvas.getContext("2d")); ctx.font = "20pt Arial"; ctx.fillText("Hello, Canvas!", 20, 20); ctx.fillText("www.xujiwei.com", 20, 50); function fixContext(ctx) { // * upgrade Firefox 3.0.x text rendering to HTML 5 standard if (!ctx.fillText && ctx.mozDrawText) { ctx.fillText = function(textToDraw, x, y, maxWidth) { ctx.translate(x, y); ctx.mozTextStyle = ctx.font; ctx.mozDrawText(textToDraw); ctx.translate(-x, -y); }; } // * Setup measureText if (!ctx.measureText && ctx.mozMeasureText) { ctx.measureText = function(text) { if (ctx.font) ctx.mozTextStyle = ctx.font; var width = ctx.mozMeasureText(text); return { width: width }; }; } // * Setup html5MeasureText if (ctx.measureText && !ctx.html5MeasureText) { ctx.html5MeasureText = ctx.measureText; ctx.measureText = function(text) { var textMetrics = ctx.html5MeasureText(text); // fake it 'til you make it textMetrics.ascent = ctx.html5MeasureText("m").width; return textMetrics; }; } // * for other browsers, no-op away if (!ctx.fillText) { ctx.fillText = function() {}; } if (!ctx.measureText) { ctx.measureText = function() { return 10; }; } return ctx; } })(); </script>

提示：您可以先修改部分代碼再運(yùn)行

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

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

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

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

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

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

結(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

標(biāo)簽：松原蚌埠廣東廣西常德鄂爾多斯果洛阿克蘇

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《HTML5 Canvas 起步(1) - 基本概念》，本文關(guān)鍵詞 HTML5,Canvas,起步,基本概念,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。