HTML5 Canvas標簽如何使用

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

基本用法

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

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

1）創建畫布

在HTML代碼的body中，使用<canvas>標簽創建畫布元素。創建時，要為該元素定義id屬性，因為Javascript需要根據該id來獲取畫布元素。

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

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

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

說明：

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

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

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

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

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

2）獲取繪制上下文

現在畫布已經有了，要在畫布上繪制圖形，還需要一只畫筆。獲取畫筆的方法如下：

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

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

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

3）定義繪制路徑

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

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

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

說明：Canvas的坐標系

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

圖4-1 Canvas的默認坐標系統

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

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

4）設置圖形屬性

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

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

5）繪制圖形

Canvas默認提供兩種繪制方法：stroke()方法和fill()方法。stroke()方法沿著路徑的坐標點依次繪制線條，fill()方法填充路徑形成的閉合區域。

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

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

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

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

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中繪制圖形

看完了這篇文章，相信你對HTML5 Canvas標簽如何使用有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！