HTML Canvas - 路径元素

路径只不过是形成/绘制在两点之间构建的基本形状，它可以定义为点列表，由直线、圆弧、曲线等片段连接，可用于制作不同的形状。

您可以使用 HTML5 canvas 的 paths2D 接口提供的方法绘制路径。

路径元素

路径元素是用于形成路径的各种基本元素，例如曲线、直线和圆弧。以下是HTML5 Canvas API提供的绘制各种路径元素的方法

序列号	方法及说明
1	搬去（）我们在绘制路径时使用虚拟指针。它始终位于可以使用moveTo(x, y)方法访问的指定点。
2	ineTo() 此方法从虚拟指针到lineTo()方法中作为参数给出的点绘制一条线。在绘制线条之前，我们必须使用moveTo()函数将光标发送到要绘制线条的起点。
3	arcTo() 此方法将使用路径绘制圆弧。它以两个点和一个半径作为参数。圆弧是从起点到终点绘制的，其曲率使用半径。
4	二次曲线To() 此函数将使用一个控制点绘制一条曲线，该控制点参考绘制两点之间的曲线而定。
5	贝塞尔曲线To() 该函数将使用两个控制点在两点之间绘制一条曲线，这两个控制点决定了曲线的结构。

开始和结束路径

由于绘制路径涉及许多函数，因此我们分别使用 beginPath() 和 closePath() 来启动和关闭路径。下面显示了一个简单的代码片段，介绍了如何在 JavaScript 代码中使用路径。

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.beginPath();
// ..... path operations
context.closePath();

在上面的代码中，在 beginPath() 和 closePath() 函数之间编写的操作构建了所需的路径。关闭路径后给出的操作不会影响路径对象，也不会正常执行。

moveTo 路径元素

最重要的函数之一是使用 moveTo() 函数，它不提供从 Canvas 进行任何绘图，但用于从该点绘制任何形状。此方法将虚拟指针移动到作为其参数给出的坐标。该方法定义为

moveTo(x, y)

通过调用 beginPath() 初始化 Canvas 元素后，我们必须调用

搬去（）

函数使虚拟指针移动到给定的坐标。此时，开始绘制并构建所需的形状。

我们必须确保给定的moveTo()参数位于 Canvas 元素内。如果它在画布之外，则绘图将不会显示并隐藏在画布之外。

例子

以下代码使用 Path 2D 元素方法moveTo()和lineTo()将形状菱形绘制到 Canvas 元素上

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

输出

上述代码生成的菱形为

lineTo 路径元素

lineTo ()方法定义线条终点的坐标，并使用Stroke()或fill()方法使线条在canvas 元素上可见。让我们看一个例子来了解该方法是如何工作的。

例子

以下示例演示了 lineTo() 方法。下面给出实现代码。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>lineTo()</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="line()">
      <canvas id="canvas" width="300" height="150" style="border: 1px solid black;"></canvas>
      <script>
         function line() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            context.lineWidth = 5.0;
            context.beginPath();
            context.strokeStyle = 'black';
            context.moveTo(20, 20);
            context.lineTo(250, 20);
            context.stroke();
            context.beginPath();
            context.moveTo(20, 120);
            context.lineTo(250, 120);
            context.stroke();
         }
      </script>
   </body>
</html>

输出

代码形成的输出是

arcTo 路径元素

此方法使用给定点绘制圆弧并使用半径，通过直线连接到前一个点。

弧（x，y，半径，起始角度，结束角度，逆时针）

arc() 方法绘制一条以点 (x, y) 为中心的圆弧，其半径作为第三个参数给出。弧线从 startAngle 开始，到 endAngle 结束，沿最后一个参数给出的方向前进。

角度是从 X 轴测量的。如果最后一个参数没有给出方向，则默认使用顺时针方向。arc() 方法中给出的角度仅以弧度为单位进行测量。因此，在向该方法提供输入之前，我们必须将度数转换为弧度。最后一个参数逆时针是布尔数据类型，如果给定 false，则顺时针绘制圆弧；如果给定 true，则逆时针绘制圆弧。当调用 arc() 方法时，仅声明一条路径，并使用调用 stroke() 或 fill() 来完成绘制，这将根据给定路径绘制圆弧。

QuadraticCurveTo 路径元素

此方法从当前位置到使用point(x, y)给出的端点绘制二次贝塞尔曲线。参考(p1,p2)指定的控制点绘制曲线。二次曲线的示例如下所示。

例子

下面给出了实现二次曲线的示例。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>quadratic curve</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 context = canvas.getContext('2d');
            context.lineWidth = 5;
            context.beginPath();
            context.moveTo(100, 100);
            context.quadraticCurveTo(150, 175, 175, 100);
            context.stroke();
            context.closePath();
         }
      </script>
   </body>
</html>

输出

上述代码生成的曲线如下所示。

bezierCurveTo 路径元素

此方法使用 (p1, p2) 和 (p3, p4) 指定的控制点，从终点 (x, y) 的位置绘制三次贝塞尔曲线。

例子

以下示例生成具有给定坐标和接触点的贝塞尔曲线。下面给出三次贝塞尔曲线的实现。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bezier curve</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
      </script>
   </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 context = canvas.getContext('2d');
            context.lineWidth = 5;
            context.beginPath();
            context.moveTo(100, 100);
            context.bezierCurveTo(150, 15, 300, 150, 350, 75);
            context.stroke();
            context.closePath();
         }
      </script>
   </body>
</html>