HTML5之Canvas标簽簡要學習

    HTML5 提供了畫布（canvas）标簽，通過與Javascript結合使用，可以在網頁上繪制圖像。Canvas是一個矩形區域，使用Javascript可以控制其每一個像素。本文将對canvas标簽進行簡要的學習。

1、canvas标簽說明

canvas标簽是一個矩形區域，它包含兩個屬性width和height，分别表示矩形區域的寬和高，這兩個屬性都是可選的，并且都可以通過css來設定，他們的預設值是300px和150px。canvas在網頁中的形式如下：

<a href="http://www.cnblogs.com/youring2/archive/2010/10/16/1853260.html#">?</a> 1 2 3 <code>&lt;</code><code>canvas</code> <code>id="myCanvas" width=”300” height=”200” style="border:1px solid #c3c3c3;"&gt;</code> <code>Your browser does not support the canvas element.</code> <code>&lt;/</code><code>canvas</code><code>&gt;</code>

<code></code><code>解析：</code>

<code>為canvas設定id屬性是便于Javascript調用；</code> <code>第二行是當浏覽器不支援canvas标簽時，将顯示這行文字。</code>

2、檢測浏覽器支援

Canvas标簽并沒有得到目前所有浏覽器的支援，是以在使用canvas繪圖的時候，要先檢測用戶端浏覽器是否支援。下面的示例将通過Javascript判斷浏覽器是否支援：

4 5 6 7 8 9 10 11 12 13 14 15 <code>&lt;canvas id=</code><code>"myCanvas"</code> <code>width=”300” height=”200” style=</code><code>"border:1px solid #c3c3c3;"</code><code>&gt;</code> <code>&lt;/canvas&gt;</code> <code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code> <code></code><code>var</code> <code>myCanvas = document.getElementById(</code><code>"myCanvas"</code><code>);</code> <code></code><code>if</code> <code>(!myCanvas.getContext)</code> <code></code><code>{</code> <code></code><code>alert(</code><code>"Your browser does not support the canvas element."</code><code>);</code> <code></code><code>}</code> <code></code><code>else</code> <code></code><code>// do something here</code> <code>&lt;/script&gt;</code>

解析：

上面的Javascript代碼通過判斷getContext方法是否為空來判斷浏覽器是否支援canvas标簽。

3、繪制線條和圖案

現在，你隻需要在頁面上添加canvas标簽，并通過Javascript調用它的相應方法，就可以輕松的在頁面上繪制線條和圖案。

//繪制線條 16 17 18 19 20 21 22 <code>&lt;canvas id=</code><code>"myCanvas"</code> <code>style=</code><code>"border:1px solid #c3c3c3;"</code><code>&gt;</code> <code></code><code>var</code> <code>myContext = myCanvas.getContext(</code><code>"2d"</code><code>);</code> <code></code><code>myContext.moveTo(200, 150);</code> <code></code><code>myContext.lineTo(100, 100);</code> <code></code><code>myContext.lineTo(200, 50);</code> <code></code><code>myContext.strokeStyle =</code><code>"#FF0000"</code><code>;</code> <code></code><code>myContext.lineWidth = 4;</code> <code></code><code>myContext.stroke();</code>

顯示在頁面中放置了一個canvas标簽，設定id、width、height等屬性，并為這個标簽設定邊框。 在Javascript中檢測浏覽器是否支援 當浏覽器支援的時候開始調用getContext方法獲得繪圖的上下文（這地方很像vc中的GDI繪圖~~），目前隻提供了2D上下文，将來還有可能支援OpenGL ES的3D上下文。 moveTo方法是将目前位置移動到指定的坐标 lineTo方法是向指定的左邊繪制直線 strokeStyle 屬性是指定線條的顔色，在本例子中指定為紅色 lineWidth 屬性設定線條的粗細，這裡設定為4px stroke方法則是将直線顯示出來。貌似是之前隻是規定了哪裡有線條，并沒有顯示，當調用這個方法後，線條才可以顯示。

// 繪制圖案 23 24 25 <code>&lt;canvas id=</code><code>"myCanvas"</code> <code>width=</code><code>"300"</code> <code>height=</code><code>"200"</code> <code>style=</code><code>"border:1px solid #c3c3c3;"</code><code>&gt;</code> <code></code><code>myContext.fillStyle =</code><code>"rgb(200,0,0)"</code><code>;</code> <code></code><code>myContext.fillRect(10, 10, 55, 50);</code> <code></code><code>myContext.fillStyle =</code><code>"rgba(0, 0, 200, 0.5)"</code><code>;</code> <code></code><code>myContext.fillRect(30, 30, 55, 50);</code> <code></code><code>myContext.fillRect(100, 0, 150, 50);</code> <code></code><code>myContext.strokeRect(100, 60, 150, 50);</code> <code></code><code>myContext.clearRect(130, 10, 90, 30);</code>

直接到fillStyle屬性，之前的代碼是相同的，不再贅言。 fillStyle屬性設定了填充的顔色、透明度等，如果設定為"rgb(200,0,0)"，則表示一個顔色，不透明；如果設定為"rgba(0,0,200,0.5)"，則表示顔色為rgb(0,0,200)，透明度為50%， fillRect方法是繪制一個矩形，這個矩形區域沒有邊框，隻有填充色。這個方法有四個參數，前兩個表示左上角的坐标位置，第三個參數為長度，第四個參數為高度。 strokeRect方法繪制一個帶邊框的矩形。該方法的四個參數的解釋同上。 clearRect方法是清除一個矩形區域，被清除的區域将沒有任何線條。該方法的四個參數的解釋同上。

4、繪制路徑

路徑是繪制自定義圖形的好方法，在canvas中通過beginPath()方法開始繪制路徑，這個時侯你就可以繪制直線、曲線等，繪制完成後調用fill()和stroke()完成填充和設定邊框，通過closePath()方法結束路徑的繪制。下面的例子講演時如何繪制路徑：

26 27 28 29 30 31 32 <code></code> <code></code><code>myContext.fillStyle =</code><code>'#0000ff'</code><code>;</code> <code></code><code>myContext.strokeStyle =</code><code>'#ff0000'</code><code>;</code> <code></code><code>myContext.lineWidth = 2;</code> <code></code><code>myContext.beginPath();</code> <code></code><code>myContext.moveTo(30, 30);</code> <code></code><code>myContext.lineTo(150, 30);</code> <code></code><code>myContext.lineTo(150, 120);</code> <code></code><code>myContext.lineTo(90, 100);</code> <code></code><code>myContext.lineTo(120, 60);</code> <code></code><code>myContext.lineTo(30, 30);</code> <code></code><code>myContext.fill();</code> <code></code><code>myContext.closePath();</code>

在獲得渲染上下文後，設定了填充色、邊框色和邊框寬度。 調用beginPath()方法開始繪制路徑 通過lineTo()方法繪制一個閉合的自定義圖形 調用fill()方法進行填充 調用stroke()方法設定邊框 調用closePath()方法結束路徑的繪制 本文轉自齊師傅部落格園部落格，原文連結：http://www.cnblogs.com/youring2/archive/2010/10/16/1853260.html，如需轉載請自行聯系原作者