HTML - canvas 标签

HTML <canvas>标签用于绘制图形。它指定了网页的一个部分，可以使用脚本制作各种对象、图形、动画和照片合成。

这是 HTML5 中包含的一个新标签。<canvas>标签只是视觉对象的容器，因此，如果要绘制它们，则应使用脚本。在使用 <canvas> 标签时，区分经常混淆的想法（如 <canvas> 标签）和元素的上下文至关重要。画布上下文是一个对象，具有自己的一组属性和呈现策略。上下文可以是 2D 或 3D。<canvas> 标签只能有一个上下文。

语法


<canvas> ... </canvas>

属性

<canvas> 标签支持 HTML 的全局属性和事件属性。也接受一些特定属性，这些属性在下面列出。

属性	值	描述
height	pixels	指定创建的画布的高度，默认值为 150。
width	pixels	指定已创建画布的宽度，默认值为 300。

<canvas> 标签示例

下面的示例将说明 <canvas> 标签的用法。在哪里、何时以及如何使用它来使用 <canvas> 标签创建图形，以及我们如何使用 CSS 设置该图形的样式。

使用 Canvas 标签创建图形

让我们看一下以下示例，我们将使用 <canvas> 标签绘制圆圈。


<!DOCTYPE html>
<html>
<body>
   <canvas id = "QikepuCom" height = "200" width = "210" style = "border:2px solid #8E44AD ">
   </canvas>
   <script>
      var x = document.getElementById("QikepuCom");
      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="QikepuCom" width="1000" height="100"></canvas>
    <script>
        var x = document.getElementById("QikepuCom");
        var y = x.getContext("2d");
        y.font = "60px verdana";
        y.strokeStyle = "green";
        y.strokeText("QikepuCom", 20, 60);
    </script>
</body>
</html>

<canvas> 标签的图形css样式

以下示例，我们将用<canvas> 标签制作线性渐变并用渐变填充矩形。


<!DOCTYPE html>
<html>
<body>
   <canvas id="Qikepu" width="600" height="150" style="border:2px solid #D2B4DE;"></canvas>
   <script>
      var x = document.getElementById("Qikepu");
      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="Qikepu" width="500" height="200" style="border:3px solid #27AE60"></canvas>
   <script>
      var x = document.getElementById("Qikepu");
      var y = x.getContext("2d");
      y.font = "bold 35px solid";
      y.fillText("QikepuCom", 100, 100);
   </script>
</body>
</html>

支持的浏览器

浏览器
<canvas>	4.0	9.0	2.0	3.1	9.0

打印本页