小編給大家分享一下HTML5 Canvas標(biāo)簽如何使用，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

我們提供的服務(wù)有：做網(wǎng)站、成都做網(wǎng)站、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、南岳ssl等。為成百上千企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的南岳網(wǎng)站制作公司

基本用法

使用 標(biāo)簽在頁(yè)面上創(chuàng)建畫布元素，畫布一旦創(chuàng)建，就可以使用Javascript提供的一套強(qiáng)大的Canvas API編寫代碼，在畫布中繪制任意圖形，甚至加入高級(jí)動(dòng)畫。

在Canvas中繪制圖形，一般需要五步，依次為：

1）創(chuàng)建畫布

在HTML代碼的body中，使用標(biāo)簽創(chuàng)建畫布元素。創(chuàng)建時(shí)，要為該元素定義id屬性，因?yàn)镴avascript需要根據(jù)該id來(lái)獲取畫布元素。

畫布的默認(rèn)寬度為300px，高度為150px，可以通過(guò)元素的width屬性自定義其寬度，height屬性自定義其高度。代碼如下：

上述代碼，在頁(yè)面中創(chuàng)建了一個(gè)畫布，其id為"canvas"，寬度為300px，高為300px。

說(shuō)明：

1、默認(rèn)情況下，畫布本身沒(méi)有任何外觀，只是一塊透明區(qū)域，什么也看不見(jiàn)，可以通過(guò)CSS來(lái)控制，讓其可見(jiàn)。跟其它HTML元素一樣，也可以通過(guò)CSS來(lái)定義canvas元素的尺寸、增加邊框、設(shè)置內(nèi)邊距、外邊距等。并且，CSS屬性的繼承規(guī)則也同樣適用，如在canvas內(nèi)添加的文字，默認(rèn)會(huì)繼承canvas元素本身的字體屬性。

需要特別注意的是，畫布的尺寸和CSS定義的尺寸是完全不同的概念。畫布的尺寸是由畫布元素的width和height屬性定義的，而CSS中定義的尺寸是畫布元素在頁(yè)面中顯示的尺寸。如果兩者定義的尺寸不相同，則畫布上的像素會(huì)自動(dòng)縮放，以適合CSS中定義的尺寸。另外，畫布中的坐標(biāo)，也是根據(jù)畫布的width和height屬性定義的。

2、畫布的尺寸一旦定義，就不能修改，除非重置畫布。重置畫布的width屬性或height屬性，都會(huì)清空整個(gè)畫布，擦除當(dāng)前路徑，并重置所有的圖形屬性到初始狀態(tài)。

3、由于是HTML5中新增的元素，一些老瀏覽器（如IE8及以下版本）不支持元素?？梢栽?canvas>元素內(nèi)部提供替代圖片、或文本說(shuō)明，為訪問(wèn)者提供友好的提示信息。如：

1. 您的瀏覽器不支持canvas。

2）獲取繪制上下文

現(xiàn)在畫布已經(jīng)有了，要在畫布上繪制圖形，還需要一只畫筆。獲取畫筆的方法如下：

1. var canvas = document.getElementById("canvas");
   var context = canvas.getContext("2d");

由于畫筆是屬于畫布的，所以先要調(diào)用getElementById()方法獲得畫布的訪問(wèn)權(quán)。然后，調(diào)用畫布對(duì)象的getContext()方法來(lái)獲取畫筆，這里的字符串參數(shù)"2d"，用來(lái)定義畫筆的種類，"2d"表示繪制二維圖形的畫筆。當(dāng)然，還會(huì)有"3d"，但目前還不支持。

畫筆在Canvas 中被稱作“繪制上下文”，Canvas API基本上都是定義在“繪制上下文”對(duì)象上，而非元素上。

3）定義繪制路徑

Canvas中的所有基本圖形，都是根據(jù)路徑來(lái)繪制的。首先，調(diào)用beginPath()方法開(kāi)始一條新的路徑；然后，定義路徑及子路徑；最后，調(diào)用closePath()方法來(lái)關(guān)閉。代碼如下：

1. context.beginPath();
   context.rect(20, 40, 200, 80);
   context.closePath();

上述代碼中，rect()方法繪制了一條矩形路徑，該矩形路徑的左上頂點(diǎn)坐標(biāo)為x=20,y=40，矩形寬度為200px，長(zhǎng)度為80px。

說(shuō)明：Canvas的坐標(biāo)系

默認(rèn)情況下，Canvas 的坐標(biāo)系以Canvas 元素的左上角為坐標(biāo)原點(diǎn)(0, 0)。水平方向?yàn)閤軸，并向右增長(zhǎng)；垂直方向?yàn)閥軸，并向下增長(zhǎng)。如圖 4?1所示：

圖4-1 Canvas的默認(rèn)坐標(biāo)系統(tǒng)

畫布上每一個(gè)點(diǎn)的坐標(biāo)都直接映射到一個(gè)CSS像素上，點(diǎn)可以使用浮點(diǎn)數(shù)來(lái)指定坐標(biāo)，但它不會(huì)自動(dòng)轉(zhuǎn)換為整型值。

需要注意的是，此時(shí)，所繪制的內(nèi)容并不會(huì)立即顯示出來(lái)。因?yàn)檫@里只是定義一條不可見(jiàn)的路徑，并未在畫布上繪制任何圖形。稍后，可以調(diào)用stroke()或fill()方法，來(lái)執(zhí)行繪制動(dòng)作，使其可見(jiàn)。

4）設(shè)置圖形屬性

1. context.strokeStyle = '#f00';  // 設(shè)置線條樣式
   context.fillStyle = "#ccc";   // 設(shè)置填充樣式

上述代碼設(shè)置矩形路徑的輪廓線條的顏色為紅色（#f00），填充顏色為灰色（#ccc）。該步驟為可選，如果省略，則使用Canvas提供的默認(rèn)屬性繪圖。

5）繪制圖形

Canvas默認(rèn)提供兩種繪制方法：stroke()方法和fill()方法。stroke()方法沿著路徑的坐標(biāo)點(diǎn)依次繪制線條，fill()方法填充路徑形成的閉合區(qū)域。

這兩個(gè)方法都作用在當(dāng)前路徑的所有子路徑上，并且都不更改當(dāng)前路徑，所以它們可以被同時(shí)調(diào)用。代碼如下：

1. context.stroke();
   context.fill();

如果存在多條路徑，則每條路徑都要分別調(diào)用stroke()方法或fill()方法，否則，該路徑不會(huì)被繪制，該路徑所定義的圖形不會(huì)顯示在畫布中。

至此，在畫布中繪制圖形的過(guò)程就全部完成了，圖形已經(jīng)真正繪制到畫布上了。當(dāng)然，在實(shí)際應(yīng)用中，最好將這些繪制過(guò)程封裝在一個(gè)函數(shù)中，并在頁(yè)面加載完成后，再調(diào)用繪制函數(shù)來(lái)繪制圖形。本實(shí)例的完整代碼如下：

在瀏覽器中的運(yùn)行效果如圖 4?2所示：

   圖4-2 Canvas中繪制圖形

看完了這篇文章，相信你對(duì)HTML5 Canvas標(biāo)簽如何使用有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！