本篇文章為大家展示了HTML5 Canvas標(biāo)簽使用和收錄是怎樣的，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到伊寧網(wǎng)站設(shè)計(jì)與伊寧網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類(lèi)型包括：網(wǎng)站設(shè)計(jì)制作、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊(cè)、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋伊寧地區(qū)。

 一、基本概念

什么是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é)得我寫(xiě)的不夠明白，那么你可以在參考資料中找到 Mozilla 網(wǎng)站上 Canvas 教程的鏈接。

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

開(kāi)始使用 Canvas

使用 Canvas 很簡(jiǎn)單，與使用其他 HTML 元素一樣，只需要在頁(yè)面中添加一個(gè)  標(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 類(lèi)型參數(shù)，目前可以用的并且是唯一可以用的類(lèi)型值就是 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ī)范不一致的地方：

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;
}

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

Hello, Canvas!

在對(duì) Canvas 進(jìn)行了一些初步了解后，開(kāi)始來(lái)寫(xiě)我們的第一個(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)看具體的效果。

二、路徑

圖形的基礎(chǔ) - 路徑

在 Canvas 中，所有基本圖形都是以路徑為基礎(chǔ)的，也就是說(shuō)，我們?cè)谡{(diào)用 2dContext 的 lineTo、rect 等方法時(shí)，其實(shí)就是往已經(jīng)的 context 路徑集合中再添加一些路徑點(diǎn)，在最后使用 fill 或 stroke 方法進(jìn)行繪制時(shí)，都是依據(jù)這些路徑點(diǎn)來(lái)進(jìn)行填充或畫(huà)線。

在每次開(kāi)始繪制路徑前，都應(yīng)該使用 context.beginPath() 方法來(lái)告訴 Context 對(duì)象開(kāi)始繪制一個(gè)新的路徑，否則接下來(lái)繪制的路徑會(huì)與之前繪制的路徑疊加，在填充或畫(huà)邊框時(shí)就會(huì)出現(xiàn)問(wèn)題。在繪制完成路徑后，可以直接使用 context.closePath() 方法來(lái)關(guān)閉路徑，或者手動(dòng)關(guān)閉路徑。另外，如果在填充時(shí)路徑?jīng)]有關(guān)閉，那么 Context 會(huì)自動(dòng)調(diào)用 closePath 方法將路徑關(guān)閉。

基本路徑方法

1. beginPath, closePath

這兩個(gè)方法在前面已經(jīng)介紹過(guò)，分別用來(lái)通知 Context 開(kāi)始一個(gè)新的路徑和關(guān)閉當(dāng)前的路徑。

在 Canvas 中使用路徑時(shí)，應(yīng)該要保持一個(gè)良好的習(xí)慣，每次開(kāi)始繪制路徑前都要調(diào)用一次 beginPath 方法，否則畫(huà)出來(lái)的效果難看不說(shuō)，還會(huì)嚴(yán)重影響性能。

在下面這張圖中，左邊的圖形在每次繪制矩形前都調(diào)用了一次 beginPath 來(lái)清除之前的路徑并重新開(kāi)始繪制新的路徑，而后面的圖形則就只在繪制所有圖形前調(diào)用了一次 beginPath 來(lái)清除路徑，因此，雖然這里是使用的邊框色是 #666，但是右邊的圖形顏色比左邊的深一些，因?yàn)槊看问褂?nbsp;stroke 繪制邊框時(shí)，會(huì)把之前的路徑再次繪制一遍，疊加起來(lái)顏色就比原來(lái)深一些。

在 Context 中路徑數(shù)較少時(shí)，如果不考慮顯示效果，性能上還可以接受，但是如果 Context 中的路徑數(shù)很多時(shí)，在開(kāi)始繪制新路徑前不使用 beginPath 的話，因?yàn)槊看卫L制都要將之前的路徑重新繪制一遍，這時(shí)性能會(huì)以指數(shù)下降。

因此，除非有特殊需要，每次開(kāi)始繪制路徑前都要調(diào)用 beginPath 來(lái)開(kāi)始新路徑。

2. 移動(dòng)與直線 moveTo, lineTo, rect

void moveTo(in float x, in float y);

在 Canvas 中繪制路徑，一般是不需要指定起點(diǎn)的，默認(rèn)的起點(diǎn)就是上一次繪制路徑的終點(diǎn)，因此，如果需要指定起點(diǎn)的話，就需要使用 moveTo 方法來(lái)指定要移動(dòng)到的位置。

void lineTo(in float x, in float y);

lineTo 方法則是繪制一條直接路徑到指定的位置。在調(diào)用完 lineTo 方法后，Context 內(nèi)部的繪制起點(diǎn)會(huì)移動(dòng)到直線的終點(diǎn)。

void rect(in float x, in float y, in float w, in float h);

rect 方法用來(lái)繪制一個(gè)矩形路徑，通過(guò)參數(shù)指定左上角位置以及寬和高。在調(diào)用 rect 后，Context 的繪制起點(diǎn)會(huì)移動(dòng)到 rect 繪制的矩形的左上角。

rect 方法與后面要介紹的 arc 方法與其他路徑方法有一點(diǎn)不同，它們是使用參數(shù)指定起點(diǎn)的，而不是使用 Context 內(nèi)部維護(hù)的起點(diǎn)。

3. 曲線 arcTo, arc, quadraticCurveTo, bezierCurveTo

void arcTo(in float x1, in float y1, in float x2, in float y2, in float radius);

按照 WHATWG 文檔的說(shuō)明，這個(gè)方法是畫(huà)一個(gè)與兩條射線相切的的圓弧，兩條射線其中一條為穿過(guò) Context 繪制起點(diǎn)，終點(diǎn)為 (x1, y1)，另外一條為穿過(guò) (x2, y2)，終點(diǎn)為 (x1, y1)，這條圓弧為最小的與這兩條射線相切的圓弧。在調(diào)用完 arcTo 方法后，將 圓弧與 射線 (x1, y1)-(x2, y2) 的切點(diǎn)添加到當(dāng)前路徑中，做為下次繪制的起點(diǎn)。

在測(cè)試中發(fā)現(xiàn)，F(xiàn)irefox 和 Opera 目前對(duì)這個(gè)方法的支持并不好，只有 Chrome 和 Safari 4 能繪制出正確的路徑。

void arc(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise);

arc 方法用來(lái)繪制一段圓弧路徑，通過(guò)圓心位置、起始弧度、終止弧度來(lái)指定圓弧的位置和大小，這個(gè)方法也不依賴(lài)于 Context 維護(hù)的繪制起點(diǎn)。而在畫(huà)圓弧時(shí)的旋轉(zhuǎn)方向則由最后一個(gè)參數(shù) anticlockwise 來(lái)指定，如果為 true 就是逆時(shí)針，false 則為順時(shí)針。

void quadraticCurveTo(in float cpx, in float cpy, in float x, in float y);

quadraticCurveTo 方法用來(lái)繪制二次樣條曲線路徑，參數(shù)中 cpx 與 cpy 指定控制點(diǎn)的位置，x 和 y 指定終點(diǎn)的位置，起點(diǎn)則是由 Context 維護(hù)的繪制起點(diǎn)。

void bezierCurveTo(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y);

bezierCurveTo 方法用來(lái)繪制貝塞爾曲線路徑，它與 quadraticCurveTo 相似，不過(guò)貝塞爾曲線有兩個(gè)控制點(diǎn)，因此參數(shù)中的 cp1x, cp1y, cp2x, cp2y 用來(lái)指定兩個(gè)控制點(diǎn)的位置，而 x 和 y 指定綹的位置。

4. fill, stroke, clip

fill 與 stroke 這兩個(gè)方法很好理解，分別用來(lái)填充路徑與繪制路徑線條。

clip 方法用來(lái)給 Canvas 設(shè)置一個(gè)剪輯區(qū)域，在調(diào)用 clip 方法之后的代碼只對(duì)這個(gè)設(shè)定的剪輯區(qū)域有效，不會(huì)影響其他地方，這個(gè)方法在要進(jìn)行局部更新時(shí)很有用。默認(rèn)情況下，剪輯區(qū)域是一個(gè)左上角在 (0, 0)，寬和高分別等于 Canvas 元素的寬和高的矩形。

在畫(huà)這個(gè)圖時(shí)，雖然兩次都是使用 fillRect(0, 0, 100, 100) 填充了一個(gè) 100x100 大小矩形，但是顯示的結(jié)果卻是第二次填充的只是中間的一小塊，這是因?yàn)樵趦纱翁畛渲g使用 clip 方法設(shè)定了剪輯區(qū)域，這樣第二次填充時(shí)只會(huì)影響到所設(shè)定的中間那一小部分區(qū)域。

5. clearRect, fillRect, strokeRect

這三個(gè)方法并不是路徑方法，而是用來(lái)直接處理 Canvas 上的內(nèi)容，相當(dāng)于 Canvas 的背景，調(diào)用這三個(gè)方法也不會(huì)影響 Context 繪圖的起點(diǎn)。

要清除 Canvas 上的所有內(nèi)容時(shí)，可以直接調(diào)用 context.clearRect(0, 0, width, height) 來(lái)直接清除，而不需要使用路徑方法繪制一個(gè)與 Canvas 同等大小的矩形路徑再使用 fill 方法去清除。

通過(guò) Canvas 的路徑方法，可以使用 Canvas 處理一些簡(jiǎn)單的矢量圖形，這樣在縮放時(shí)也不會(huì)失真。不過(guò) Canvas 的路徑方法也不是很強(qiáng)大，至少連個(gè)橢圓的路徑都沒(méi)有……

上述內(nèi)容就是HTML5 Canvas標(biāo)簽使用和收錄是怎樣的，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。