HTML Canvas - 路径元素

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

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

路径元素

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

序号	Method 及描述
1	moveTo() 我们在使用路径绘制时使用一个虚拟指针。它始终位于可以使用 moveTo(x, y) method 访问的指定点。
2	lineTo() 此 method 从虚拟指针到 lineTo() method 中作为参数给出的点绘制一条线。在绘制线之前，我们必须使用 moveTo() 函数将光标发送到应从其绘制线的起点。
3	arcTo() 此 method 将使用路径绘制一条弧线。它将两个点和一个半径作为参数。弧线从起点到终点绘制，使用半径进行弯曲。
4	quadraticCurveTo() 此函数将使用一个控制点绘制曲线，该控制点作为参考在两点之间绘制曲线。
5	bezierCurveTo() 此函数将使用两个控制点在两点之间绘制曲线，这两个控制点确定曲线的结构。

开始和结束路径

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

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

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

moveTo 路径元素

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

moveTo(x, y)

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

moveTo()

函数，以便虚拟指针移动到给定的坐标。在该点，开始绘图并构建所需的形状。

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

示例

以下代码使用 Path 2D 元素 method 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() method 定义线的终点的坐标，stroke() 或 fill() method 用于使线在 canvas 元素上可见。让我们看一个示例来了解该 method 的工作原理。

示例

以下示例演示了 lineTo() method。实现代码如下所示。

<!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 路径元素

此 method 绘制一条具有给定点的弧线，并使用半径，通过一条直线连接到前一点。

arc(x, y, radius, startAngle, endAngle, counterclockwise)

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

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

quadraticCurveTo 路径元素

此 method 使用 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 路径元素

此 method 使用由 (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>