HTML5Canvas標(biāo)簽如何使用

小編給大家分享一下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)題。提供周到的售前咨詢(xún)和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的南岳網(wǎng)站制作公司

基本用法

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

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

1）創(chuàng)建畫(huà)布

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

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

<canvas
 
id="canvas"
    width="300"
    height="300"
>
</canvas>

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

說(shuō)明：

1、默認(rèn)情況下，畫(huà)布本身沒(méi)有任何外觀(guān)，只是一塊透明區(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元素本身的字體屬性。

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

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

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

<canvasid="canvas"width="300"height="300">您的瀏覽器不支持canvas。</canvas>

2）獲取繪制上下文

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

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

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

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

3）定義繪制路徑

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

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所示：

HTML5 Canvas標(biāo)簽如何使用圖4-1 Canvas的默認(rèn)坐標(biāo)系統(tǒng)

畫(huà)布上每一個(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)的路徑，并未在畫(huà)布上繪制任何圖形。稍后，可以調(diào)用stroke()或fill()方法，來(lái)執(zhí)行繪制動(dòng)作，使其可見(jiàn)。

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

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

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

5）繪制圖形

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

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

```
context.stroke();
context.fill();
```

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

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

<canvas id="canvas" width="300" height="300"></canvas>
<script src="jquery.js"></script>
<script>
$(function(){
   drawRect();
});
function drawRect() {
  var canvas  = document.getElementById("canvas");
  var context = canvas.getContext('2d');
     
  context.beginPath();
  context.rect(20, 40, 200, 80);
  context.closePath();
  context.strokeStyle = '#f00';
  context.fillStyle = "#ccc";
  context.stroke();
  context.fill();
}
</script>

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

HTML5 Canvas標(biāo)簽如何使用圖4-2 Canvas中繪制圖形

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

網(wǎng)站題目：HTML5Canvas標(biāo)簽如何使用
分享網(wǎng)址：http://bm7419.com/article34/geihse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、網(wǎng)站策劃、外貿(mào)建站、App開(kāi)發(fā)、服務(wù)器托管

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容