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

打印页面