HTML Canvas - 使用路径元素的 2D 形状

在本章中，我们将讨论如何使用 HTML5 的各种路径元素绘制各种 2D 形状。

有一个名为 rect() 的方法用于在 Canvas 元素中创建矩形。它使用了路径的概念，它的 syntsx 是

rect(x, y, width, height)

此方法绘制一个矩形，其左上角由 (x, y) 指定，具有给定的宽度和高度。要执行此方法，必须使用参数 x 和 y 调用moveTo() ，以便指针移动到可以绘制矩形的坐标。

以同样的方式，我们可以使用这些路径元素创建其他 2D 形状。使用 Canvas 元素中的路径创建形状所涉及的步骤是

  • 步骤 1 - 创建路径：此步骤通常使用beginPath()函数完成，该函数创建构建实际形状的路径。

  • 步骤 2 - 使用绘图命令绘制路径：要使用 Canvas 绘制形状，我们使用lineTo()和moveTo()等函数来绘制所需的路径。

  • 步骤 3 - 使用描边或填充等方法来构造形状：绘制路径后，我们使用fill()和描边()方法使生成的路径形状更容易理解。然后我们将使用closePath()函数来完成路径。

绘制三角形

从数学上讲，三条线的交点被认为是一个三角形。它由三条以特定角度相交的线组成。相交的线称为三角形的顶点。

要绘制三角形，我们必须使用 Path 函数。lineTo()函数使用三条线绘制三角形。我们首先开始路径并移动到绘制一条线的点，然后使用 lineTo() 直到形成三角形。我们必须确保赋予函数的坐标必须形成一个三角形。我们可以为使用所需函数形成的三角形添加形状、梯度等属性。

lineTo()函数 的语法是

Canvas.lineTo(x, y);

其中涉及的参数是 x 和 y，表示要绘制线的点。我们必须首先使用moveTo()函数初始化起点。

例子

以下示例使用路径操作绘制三角形。下面给出程序代码

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Triangle</title>
</head>
<body onload="triangle();">
   <canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
   <script>
      function triangle() {
         var canvas = document.getElementById('canvas');
         if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
            ctx.beginPath();
            ctx.moveTo(50, 100);
            ctx.lineTo(100, 50);
            ctx.lineTo(150, 100);
            ctx.lineTo(50, 100);
            ctx.fillStyle = "blue";
            ctx.fill()
         }
      }
   </script>
</body>
</html>

输出

上述代码形成的三角形如下所示。我们可以使用坐标来制作其他三角形，例如直角三角形和等腰三角形。我们还可以在最后添加 closePath() 函数。如果我们不在脚本末尾给出closePath() ，则路径仍在运行并且不会停止。

绘制三角形

画线

线是两点以最小距离连接时形成的形状。它是一种常见的数学形状，用于绘制几何中的大多数形状。

要通过路径使用 HTML5 Canvas 绘制一条线，我们应该使用两种方法，moveTo(x, y)和lineTo(x, y)。要识别 Canvas 上的线条，我们必须使用stroke()或fill()。moveTo ()方法定义了光标在画布上绘制的位置，而lineTo()方法定义了线条终点的坐标，而使用Stroke()或fill()方法来制作线条在画布元素上可见。除非用户指定，否则描边（）或填充（）的颜色为黑色。

用于画线的函数的语法是

Canvas.moveTo(x,y);

画布光标从原点移动到点 (x, y)。

Canvas.lineTo(x, y);

从光标点到给定参数点 (x, y) 绘制一条线。

例子

我们将通过一些示例来清楚地理解它。以下示例将在画布上选取一个正方形并使用线条绘制其对角线。下面给出实现。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Line-Diagonal</title>
      <style>
         <style>body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="line1();">
      <canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
      <script>
         function line1() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            var x = 50;
            var y = 50;
            var width = 200;
            var height = 200;
            context.strokeRect(x, y, width, height);
            context.moveTo(50, 50);
            context.lineTo(250, 250);
            context.stroke();
         }
      </script>
   </body>
</html>

输出

我们首先使用画布上的矩形构造一个正方形，其尺寸如上所示，并从其左上角坐标 (x, y) 到右下角坐标添加一条线，添加 x 和 y 值 (x+width, y+height) ）因为它们远离原点。请参阅 Canvas 坐标以清楚地理解这一点。上述代码的输出如下所示。

画线

例子

我们将研究另一个仅绘制线条的示例。让我们用线条画出字母“h”和“i”。我们将使用 lineWidth() 和 strokeStyle() 来使输出易于理解并使其看起来有吸引力。该程序的代码如下。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Line–‘hI’</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="line2();">
      <canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
      <script>
         function line2() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            context.lineWidth = 5.0;
            context.beginPath();
            context.strokeStyle = 'green';
            context.moveTo(50, 50);
            context.lineTo(50, 200);
            context.lineTo(50, 100);
            context.lineTo(100, 100);
            context.lineTo(100, 200);
            context.stroke();
            context.beginPath();
            context.strokeStyle = 'green';
            context.moveTo(200, 50);
            context.lineTo(200, 200);
            context.stroke();
         }
      </script>
   </body>
</html>

输出

以下代码的输出如下所示。我们可以使用 Canvas 元素中的线条创建文本，但实现起来非常困难。Canvas还具有文本绘制功能，使其更易于处理。我们将在本教程的后面部分使用文本。

绘制线条示例

用线条画出有趣的星形

我们将使用路径方法绘制星星。借助路径对象，可以通过组合一组线条来简单地绘制星形。我们必须编写一个 JavaScript 函数，它接受输入并将输出作为星号。绘制星星的函数是star(R, X, Y, N)，其中R是星星的中心，X和Y是中心坐标，N是需要在星星上绘制的尖峰的数量。下面给出实现。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Star</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="star();">
      <canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
      <script>
         var ctx = document.getElementById("canvas").getContext("2d");

         function star(R, X, Y, N) {
            ctx.beginPath();
            ctx.moveTo(X + R, Y);
            for (var i = 1; i <= N * 2; i++) {
               if (i % 2 == 0) {
                  var theta = i * (Math.PI * 2) / (N * 2);
                  var x = X + (R * Math.cos(theta));
                  var y = Y + (R * Math.sin(theta));
               } else {
                  var theta = i * (Math.PI * 2) / (N * 2);
                  var x = X + ((R / 2) * Math.cos(theta));
                  var y = Y + ((R / 2) * Math.sin(theta));
               }
               ctx.lineTo(x, y);
            }
            ctx.closePath();
            ctx.fillStyle = "yellow";
            ctx.fill();
            ctx.fillStyle = "green";
            ctx.stroke();
         }
         star(55, 100, 100, 5);
      </script>
   </body>
</html>

输出

画布上形成的星星如下所示。

星形

绘制圆弧

要绘制任何带有弧线的形状，我们必须使用两个可用的方法 arc() 和 arcTo()。让我们了解每种方法的功能。

使用圆弧绘制圆

我们可以很容易地使用 Arcs 画一个圆。绘制圆的有效方法是使用arc()和beginPath()方法。下面给出了 Circle 的实现。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>arc()</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="circle();">
      <canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
      <script>
         function circle() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            context.beginPath();
            context.arc(100, 100, 50, 1 * Math.PI, 5 * Math.PI);
            context.stroke();
         }
      </script>
   </body>
</html>

输出

此代码使用path()和arc()方法在画布内绘制一个圆。代码的输出如下所示。

绘制圆弧

绘制曲线

在数学中，曲线是用来描述连续移动的点的抽象路径。此类路径是使用方程式生成的。

曲线是最常见的数学表示形式，有许多应用。这些可以使用基于其接触点的方法在画布上表示。使用 Canvas 可以绘制的曲线类型是二次贝塞尔曲线和三次贝塞尔曲线。下面给出了这些方法。

贝塞尔二次曲线和三次曲线有何不同？

二次贝塞尔曲线之间的基本区别在于，二次贝塞尔曲线有一个起点和一个终点 (x, y)，并且只有一个控制点，而三次贝塞尔曲线使用两个控制点和一个终点 (x,y) 。

使用这些方法创建复杂的形状可能非常困难，因为我们在编写代码时没有任何视觉支持。因此，建议您在熟练掌握上述所有方法之前不要使用这些方法来绘制复杂的形状。

使用曲线的简单心脏程序

让我们用曲线画一个简单的有机心形。绘图的代码如下所示。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Heart</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="curve();">
      <canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
      <script>
         function curve() {
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');
            ctx.lineWidth = 5;
            ctx.beginPath();
            ctx.moveTo(300, 300);
            ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
            ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
            ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
            ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
            ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
            ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
            ctx.fillStyle = "red";
            ctx.fill();
         }
      </script>
   </body>
</html>

输出

此代码给出了一个带有对角线的红色心形。由于点位于形状之外，因此函数中给出的输入坐标会形成该线。使用上面的代码在Canvas上绘制的心是

简单心脏计划

形状的组合

我们可以在 Canvas 元素上绘制一个或多个形状的组合。唯一应该记住的是给定的坐标与所需的输出相匹配。由于我们组合了一个或多个形状，因此必须相应地分配值。请参阅网格来了解分配坐标值的概念。

使用曲线和圆弧的鸭子脸

我们将使用圆形和圆弧绘制一个简单的鸭脸图。脸和眼睛用圆圈画，嘴巴用弧线画。下面给出使用代码的实现。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>duck smile</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="smile();">
      <canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
      <script>
         function smile() {
            var canvas = document.getElementById('canvas');
            if (canvas.getContext) {
               var ctx = canvas.getContext('2d');
               ctx.beginPath();
               ctx.arc(75, 75, 50, 0, Math.PI * 2, true);
               ctx.moveTo(110, 75);
               ctx.fillStyle = "red";
               ctx.fill();
               ctx.arc(75, 75, 35, 0, Math.PI, false);
               ctx.moveTo(65, 65);
               ctx.fillStyle = "yellow";
               ctx.fill();
               ctx.arc(60, 65, 5, 0, Math.PI * 2, true);
               ctx.moveTo(95, 65);
               ctx.arc(90, 65, 5, 0, Math.PI * 2, true);
               ctx.stroke();
            }
         }
      </script>
   </body>
</html>

输出

鸭子的脸

二维路径

我们可以使用任意数量的路径和命令将对象绘制到画布上。为了方便起见，Canvas引入了Path2D，可以帮助我们轻松构建绘图。Path2D 构造函数返回初始化的路径对象，并以另一个路径作为参数。让我们在程序中实现 Path2D 对象。

例子

以下示例使用 Path2D 对象将圆形插入方形。下面给出实现。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Path2D</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
      <script>
         function draw() {
            var canvas = document.getElementById('canvas');
            if (canvas.getContext) {
               var ctx = canvas.getContext('2d');
               var rectangle = new Path2D();
               rectangle.rect(100, 100, 100, 100);
               var circle = new Path2D();
               circle.arc(150, 150, 25, 0, 2 * Math.PI);
               ctx.stroke(rectangle);
               ctx.fill(circle);
            }
         }
      </script>
   </head>
   <body onload="draw();">
      <canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
   </body>
</html>

输出

代码的输出如下所示

二维路径