HTML5 Canvas標簽使用收錄_0

2020-03-24 18:46:04

字體：大中小

來源：轉載

供稿：網友

什么是Canvas canvas 是一個新的html' target='_blank'>HTML元素，這個元素在HTML5 中被定義。這個元素通?？梢员挥脕碓?a href='http://www.49028c.com/tag/HTMLyemian_5136_1.html' target='_blank'>HTML頁面中通過JavaScript進行繪制圖形、合成圖像等等操作，也可以用來做一些動畫。當然，目前HTML5規范還在草稿階段，正式發布也許要等到2010年，不過現在已經有不少瀏覽器已經支持了部分HTML5規范。目前支持canvas元素的瀏覽器有Firefox3+、Safari4、Chrome2.0+等，因此，在運行本頁中的例子時，請確保你使用的是上述瀏覽器之一。盡管在Mozilla 已經有不少關于Canvas的教程，我還是決定把自己的學習過程記錄下來。如果覺得我寫的不夠明白，那么你可以在參考資料中找到Mozilla網站上Canvas教程的鏈接。另外，可以在這里找到一些有趣的Canvas示例開始使用Canvas 使用Canvas很簡單，與使用其他HTML元素一樣，只需要在頁面中添加一個 canvas 標簽即可：代碼如下:
canvas id= screen width= 400 height= 400 /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： canvas id= screen width= 400 height= 400 /canvas
script type= text/javascript
var canvas = document.getElementById( screen
var ctx = canvas.getContext( 2d
/script Firefox3.0.x的尷尬 Firefox3.0.x雖然支持了canvas元素，但是并沒有完全按照規范來實現，規范中的fillText、 measureText兩個方法在Firefox3.0.x中被幾個Firefox特有的方法代替，因此在Firefox3.0.x中使用Canvas時需要先fix這個幾個方法在不同瀏覽器中的差別。下面這代碼取自MozillaBespin 項目，它修正了Firefox3.0.x中Canvas的Context對象與HTML5規范不一致的地方：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;
}注意：到Opera9.5為止，Opera還不支持HTML5規范中Canvas對象的fillText以及其相關方法和屬性。 Hello,Canvas! 在對Canvas進行了一些初步了解后，開始來寫我們的第一個Canvas程序，聞名的HelloWorld的又一個分支 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 運行示例，Canvas對象所在區域顯示出 Hello,World! ，這正是代碼中ctx.fillText( Hello,World! ,20,20);的作用。fillText以及相關屬性 fillText方法用來在Canvas中顯示文字，它可以接受四個參數，其中最后一個是可選的：voidfillText(inDOMStringtext,infloatx,infloaty,[Optional]infloatmaxWidth); 其中maxWidth表示顯示文字時最大的寬度，可以防止文字溢出，不過我在測試中發現在Firefox與Chomre中指定了maxWidth時也沒有任何效果。在使用fillText方法之前，可以通過設置Context的font屬性來調整顯示文字的字體，在上面的示例中我使用了 20ptArial 來作為顯示文字的字體，你可以自己設置不同的值來看具體的效果。二、路徑圖形的基礎-路徑在Canvas中，所有基本圖形都是以路徑為基礎的，也就是說，我們在調用2dContext的lineTo、rect等方法時，其實就是往已經的context路徑集合中再添加一些路徑點，在最后使用fill或stroke方法進行繪制時，都是依據這些路徑點來進行填充或畫線。在每次開始繪制路徑前，都應該使用context.beginPath()方法來告訴Context對象開始繪制一個新的路徑，否則接下來繪制的路徑會與之前繪制的路徑疊加，在填充或畫邊框時就會出現問題。在繪制完成路徑后，可以直接使用context.closePath()方法來關閉路徑，或者手動關閉路徑。另外，如果在填充時路徑沒有關閉，那么Context會自動調用closePath方法將路徑關閉。基本路徑方法 1.beginPath,closePath 這兩個方法在前面已經介紹過，分別用來通知Context開始一個新的路徑和關閉當前的路徑。在Canvas中使用路徑時，應該要保持一個良好的習慣，每次開始繪制路徑前都要調用一次beginPath方法，否則畫出來的效果難看不說，還會嚴重影響性能。在下面這張圖中，左邊的圖形在每次繪制矩形前都調用了一次beginPath來清除之前的路徑并重新開始繪制新的路徑，而后面的圖形則就只在繪制所有圖形前調用了一次beginPath來清除路徑，因此，雖然這里是使用的邊框色是#666，但是右邊的圖形顏色比左邊的深一些，因為每次使用stroke繪制邊框時，會把之前的路徑再次繪制一遍，疊加起來顏色就比原來深一些。 canvas id= canvas width= 500 height= 500 /canvas
script type= text/javascript
var canvas = document.getElementById( canvas
var ctx = canvas.getContext( 2d
ctx.strokeStyle = #666
function useBeginPath() {
for (var i = 0; i ++i) {
ctx.beginPath();
ctx.rect(10 + i*20, 10 + i*20, 210 - i*40, 210 - i*40);
ctx.stroke();
}
}
function notUseBeginPath() {
ctx.beginPath();
for (var i = 0; i ++i) {
ctx.rect(240 + i*20, 10 + i*20, 210 - i*40, 210 - i*40);
ctx.stroke();
}
}
useBeginPath();
notUseBeginPath();
/script 在Context中路徑數較少時，如果不考慮顯示效果，性能上還可以接受，但是如果Context中的路徑數很多時，在開始繪制新路徑前不使用beginPath的話，因為每次繪制都要將之前的路徑重新繪制一遍，這時性能會以指數下降。因此，除非有特殊需要，每次開始繪制路徑前都要調用beginPath來開始新路徑。
2.移動與直線moveTo,lineTo,rect canvas id= canvas width= 500 height= 500 /canvas
script type= text/javascript
var canvas = document.getElementById( canvas
var ctx = canvas.getContext( 2d
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(110,110);
ctx.lineTo(10, 110);
ctx.lineTo(10, 10);
ctx.stroke();
ctx.beginPath();
ctx.rect(120, 10, 100, 100);
ctx.stroke();
/script
voidmoveTo(infloatx,infloaty); 在Canvas中繪制路徑，一般是不需要指定起點的，默認的起點就是上一次繪制路徑的終點，因此，如果需要指定起點的話，就需要使用moveTo方法來指定要移動到的位置。voidlineTo(infloatx,infloaty); lineTo方法則是繪制一條直接路徑到指定的位置。在調用完lineTo方法后，Context內部的繪制起點會移動到直線的終點。voidrect(infloatx,infloaty,infloatw,infloath); rect方法用來繪制一個矩形路徑，通過參數指定左上角位置以及寬和高。在調用rect后，Context的繪制起點會移動到rect繪制的矩形的左上角。rect方法與后面要介紹的arc方法與其他路徑方法有一點不同，它們是使用參數指定起點的，而不是使用Context內部維護的起點。3.曲線arcTo,arc,quadraticCurveTo,bezierCurveTo voidarcTo(infloatx1,infloaty1,infloatx2,infloaty2,infloatradius); 按照WHATWG文檔的說明，這個方法是畫一個與兩條射線相切的的圓弧，兩條射線其中一條為穿過Context繪制起點，終點為(x1,y1)，另外一條為穿過(x2,y2)，終點為(x1,y1)，這條圓弧為最小的與這兩條射線相切的圓弧。在調用完arcTo方法后，將圓弧與射線(x1,y1)-(x2,y2)的切點添加到當前路徑中，做為下次繪制的起點。在測試中發現，Firefox和Opera目前對這個方法的支持并不好，只有Chrome和Safari4能繪制出正確的路徑。 canvas id= canvas width= 500 height= 500 /canvas
script type= text/javascript
var canvas = document.getElementById( canvas
var ctx = canvas.getContext( 2d
ctx.beginPath();
ctx.strokeStyle = #000
ctx.translate(200, 200);
ctx.moveTo(10, 10);
ctx.arcTo(110, 60, 10, 110, 30);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = #999
ctx.moveTo(10, 6);
ctx.lineTo(114, 60);
ctx.lineTo(10, 114);
ctx.stroke();
/script voidarc(infloatx,infloaty,infloatradius,infloatstartAngle,infloatendAngle,inbooleananticlockwise); arc方法用來繪制一段圓弧路徑，通過圓心位置、起始弧度、終止弧度來指定圓弧的位置和大小，這個方法也不依賴于Context維護的繪制起點。而在畫圓弧時的旋轉方向則由最后一個參數anticlockwise來指定，如果為true就是逆時針，false則為順時針。voidquadraticCurveTo(infloatcpx,infloatcpy,infloatx,infloaty); quadraticCurveTo方法用來繪制二次樣條曲線路徑，參數中cpx與cpy指定控制點的位置，x和y指定終點的位置，起點則是由Context維護的繪制起點。voidbezierCurveTo(infloatcp1x,infloatcp1y,infloatcp2x,infloatcp2y,infloatx,infloaty); bezierCurveTo方法用來繪制貝塞爾曲線路徑，它與quadraticCurveTo相似，不過貝塞爾曲線有兩個控制點，因此參數中的cp1x,cp1y,cp2x,cp2y用來指定兩個控制點的位置，而x和y指定綹的位置。 canvas id= canvas width= 500 height= 500 /canvas
script type= text/javascript
var canvas = document.getElementById( canvas
var ctx = canvas.getContext( 2d
ctx.translate(10, 10);
ctx.beginPath();
ctx.arc(50, 50, 50, 0, Math.PI, true);
ctx.stroke();
// quadraticCurveTo
ctx.beginPath();
ctx.strokeStyle = #000
ctx.moveTo(110, 50);
ctx.quadraticCurveTo(160, 0, 210, 50);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = red
ctx.moveTo(110, 50);
ctx.lineTo(160, 0);
ctx.lineTo(210, 50);
ctx.stroke();
// bezierCurveTo
ctx.beginPath();
ctx.strokeStyle = #000
ctx.moveTo(220, 50);
ctx.bezierCurveTo(250, 0, 280, 10, 320, 50);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = red
ctx.moveTo(220, 50);
ctx.lineTo(250, 0);
ctx.lineTo(280, 10);
ctx.lineTo(320, 50);
ctx.stroke();
/script 4.fill,stroke,clip fill與stroke這兩個方法很好理解，分別用來填充路徑與繪制路徑線條。clip方法用來給Canvas設置一個剪輯區域，在調用clip方法之后的代碼只對這個設定的剪輯區域有效，不會影響其他地方，這個方法在要進行局部更新時很有用。默認情況下，剪輯區域是一個左上角在(0,0)，寬和高分別等于Canvas元素的寬和高的矩形。在畫這個圖時，雖然兩次都是使用fillRect(0,0,100,100)填充了一個100x100大小矩形，但是顯示的結果卻是第二次填充的只是中間的一小塊，這是因為在兩次填充之間使用clip方法設定了剪輯區域，這樣第二次填充時只會影響到所設定的中間那一小部分區域。 canvas id= canvas width= 500 height= 500 /canvas
script type= text/javascript
var canvas = document.getElementById( canvas
var ctx = canvas.getContext( 2d
ctx.translate(10, 10);
// fill a green rectangle
ctx.fillStyle = green
ctx.fillRect(0, 0, 100, 100);
// set the clipping region
ctx.beginPath();
ctx.rect(30, 30, 40, 40);
ctx.clip();
ctx.stroke();
// fill a yellow rectangle
ctx.fillStyle = yellow
ctx.fillRect(0, 0, 100, 100);
/script 5.clearRect,fillRect,strokeRect 這三個方法并不是路徑方法，而是用來直接處理Canvas上的內容，相當于Canvas的背景，調用這三個方法也不會影響Context繪圖的起點。要清除Canvas上的所有內容時，可以直接調用context.clearRect(0,0,width,height)來直接清除，而不需要使用路徑方法繪制一個與Canvas同等大小的矩形路徑再使用fill方法去清除。結語通過Canvas的路徑方法，可以使用Canvas處理一些簡單的矢量圖形，這樣在縮放時也不會失真。不過Canvas的路徑方法也不是很強大，至少連個橢圓的路徑都沒有參考資料
1.TheCanvasElement,WHATWG
html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：html支持的列表標簽：無序列表、有序列表和定義

下一篇：整理HTML5移動端開發的常用觸摸事件