html5中標籤的具體用法詳解

元素是為了客戶端向量圖形狀而設計的。它自己沒有行為，但卻把一個繪圖 API 展現給客戶端 JavaScript 以使腳本能夠把想繪製的東西都繪製到一塊畫布上。

canvas是HTML5中新定義的標籤，顧名思義，它本身就是一個畫布標籤，沒有自己的行為，只是一個圖形容器，必須使用腳本來繪製圖形。以下是它用法的範例：

<canvas id="canvas" width="200" height="300">  
Your browser does not support HTML5 Canvas.  
</canvas>

從上述程式碼可以看出，canvas標籤有三個屬性：id,width,height.其中，定義id值是為了在JavaScript程式碼中用其引用該canvas標籤，從而以canvas為介面進行繪畫。 width和height分別定義了canvas的寬度和高度，預設以像素為單位，數字後面不能加px單位。

canvas標籤不是所有瀏覽器都支援的，因此我們需要在canvas的開始和結束標籤之間可以放置一段文本，當瀏覽器不支援canvas標籤時，這段文字將顯示在canvas標籤在所在的位置上，以提醒讀者canvas標籤不適用於此瀏覽器。在javascript中也要判斷瀏覽器是否支援此標籤：

var canvas=document.getElementById("canvas")  
if(!canvas.getContext)  
{  
alert("Your browser does not support HTML5 Canvas.")  
}  
else  
{  
//do something here  
}

可以用個canvas元素來顯示一個紅色的矩形：

<canvas id="Canvas"></canvas>  
<script type="text/Javascript">  
var canvas=document.getElementById(&#39;Canvas&#39;);  
var ctx=canvas.getContext(&#39;2d&#39;);  
ctx.fillStyle=&#39;#FF0000&#39;;  
ctx.fillRect(0,0,80,100);  
</script>

如上例，繪圖API都沒有定義在canvas元素本身上，而是定義在透過畫布的getContext()方法獲得的一個繪圖環境物件上。 canvas API也使用了路徑的表示法。但是，路徑由一系列的方法呼叫來定義，而不是描述為字母和數字的字串，例如呼叫beginPath()和arc()方法。一旦定義了路徑，其他的方法如fill()，都是對此路徑操作。

以上是html5中標籤的具體用法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！