深入知道HTML5 Canvas標(biāo)簽的基本用法

基本用法

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

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

1）創(chuàng)建畫布

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

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

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

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

說明：

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

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

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

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

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

2）獲取繪制上下文

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

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

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

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

3）定義繪制路徑

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

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

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

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

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

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

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

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

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)點依次繪制線條，fill()方法填充路徑形成的閉合區(qū)域。

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

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

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

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

1. <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>

在瀏覽器中的運行效果如圖 4?2所示：

圖4-2 Canvas中繪制圖形

相關(guān)推薦：

canvas 使用方法詳解

Canvas的基本使用

HTML5 canvas繪圖基本使用方法

以上就是深入了解HTML5 Canvas標(biāo)簽的基本用法的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！