HTML - <canvas> 標籤

HTML <canvas> 標籤用於繪製圖形。它指定網頁上的一個區域，可以使用指令碼在其中建立各種物件、圖形、動畫和照片組合。

這是 HTML5 中包含的一個新標籤。HTML <canvas> 標籤只是一個視覺容器，因此如果您想繪製它們，則應使用指令碼。在使用 canvas 時，區分經常混淆的概念（如 canvas 元素和元素的上下文）至關重要。canvas 上下文是一個具有自己的屬性集和渲染策略的物件。上下文可以是 2D 或 3D。canvas 元素只能有一個上下文。

語法

<canvas> 
  ...
</canvas>

屬性

HTML canvas 標籤支援 HTML 的全域性和事件屬性。也接受一些特定的屬性，如下所示。

屬性	值	描述
高度	畫素	指定建立的畫布的高度，預設值為 150。
寬度	畫素	指定建立的畫布的寬度，預設值為 300。

HTML canvas 標籤示例

下面的示例將說明 canvas 標籤的使用方法。何時何地以及如何使用它來使用 canvas 標籤建立圖形，以及我們如何使用 CSS 樣式化這些圖形。

使用 Canvas 標籤建立圖形

讓我們看下面的示例，我們將使用 <canvas> 標籤繪製圓形。

<!DOCTYPE html>
<html>
<body>
   <canvas id = "tutorial" height = "200" width = "210"
           style = "border:2px solid #8E44AD ">
   </canvas>
   <script>
      var x = document.getElementById("tutorial");
      var y = x.getContext("2d");
      y.beginPath();
      y.arc(100, 100, 90, 0, 2 * Math.PI);
      y.stroke();
   </script>
</body>
</html>

建立文字圖形

考慮以下示例，我們將使用 canvas 標籤和 strokeText() 方法在畫布上繪製文字。

<!DOCTYPE html>
<html>
<body>
   <canvas id="tutorial" width="1000" height="100"></canvas>
	<script>
		var x = document.getElementById("tutorial");
		var y = x.getContext("2d");
		y.font = "60px verdana";
		y.strokeStyle = "green";
		y.strokeText("TUTORIALSPOINT", 20, 60);
	</script>
</body>
</html>

樣式化圖形元素

以下是在我們打算建立線性漸變並使用漸變填充矩形的情況下的示例。

<!DOCTYPE html>
<html>
<body>
   <canvas id="tutorial" width="600" height="150" 
           style="border:2px solid #D2B4DE;">
   </canvas>
   <script>
      var x = document.getElementById("tutorial");
      if (x.getContext) {
         var y = x.getContext("2d");
         var gradient = y.createLinearGradient(11, 91, 210, 89);
         gradient.addColorStop(0, '#DE3163');
         gradient.addColorStop(1, '#D5F5E3 ');
         y.fillStyle = gradient;
         y.fillRect(11, 12, 570, 120);
      }
   </script>
</body>
</html>

巢狀圖形

在下面的示例中，我們將使用 fillText() 方法在畫布上繪製文字。

<!DOCTYPE html>
<html>
<body>
   <canvas id="tutorial" width="500" height="200" 
           style="border:3px solid #27AE60">
   </canvas>
   <script>
      var x = document.getElementById("tutorial");
      var y = x.getContext("2d");
      y.font = "bold 35px solid";
      y.fillText("TUTORIALSPOINT", 100, 100);
   </script>
</body>
</html>

支援的瀏覽器

標籤
畫布	是 4.0	是 9.0	是 2.0	是 3.1	是 9.0

html_tags_reference.htm

列印頁面