Randysheng

# Curves

# Arc

Canvas 中绘制弧形，我们需要使用 arc() 方法。其中传入的参数：中心点坐标、圆弧半径、起始点（弧度）、终点（弧度）以及绘制方向（顺时针或逆时针）。属性lineWidth、strokeStyle 和 lineCap 能够改变圆弧的样式。

我们可以把圆弧看成是一个圆中的一部分，一个圆可以由中心点和圆半径定义。

<!DOCTYPE HTML>
<html>
  <head>Arc</head>
  <body>
    <canvas id="container" width="578" height="300"></canvas>
    <script>
      const canvas = document.getElementById('container');
      const ctx = canvas.getContext('2d');
      // 圆弧中心点
      const x = canvas.width / 2;
      const y = canvas.height / 2;
      // 圆弧半径
      const r = 75;
      // 起始点
      const startAngle = 1.1 * Math.PI;
      // 终点
      const endAngle = 1.9 * Math.PI;
      // 顺时针
      const clockwise = false;
      ctx.beginPath();
      // 绘制圆弧
      ctx.arc(x, y, r, startAngle, endAngle, clockwise);
      ctx.lineWith = 15;
      ctx.strokeStyle = "red";
      ctx.stroke();
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# Quadratic Curve

使用 quadraticCurveTo() 方法绘制二次贝塞尔曲线，该方法需要两个点：第一个点是控制点，第二个点是终点。二次贝塞尔曲线由起始点、控制点和终点来确定，其中起始点是当前路径的最后一个点，或者使用 moveTo() 方法来定义。属性lineWidth、strokeStyle 和 lineCap 能够改变曲线的样式。

控制点到起始点和终点的距离可以控制曲线程度，距离越远，曲线越陡，距离越近，曲线越平滑。

<!DOCTYPE HTML>
<html>
  <head>quadraticCurve</head>
  <body>
    <canvas id="container" width="578" height="300"></canvas>
    <script>
      const canvas = document.getElementById('container');
      const ctx = canvas.getContext('2d');

      ctx.beginPath();
      ctx.moveTo(188, 150);
      ctx.quadraticCurveTo(288, 0, 388, 150);
      ctx.lineWith = 15;
      ctx.strokeStyle = "red";
      ctx.stroke();
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# Bezier Curve

使用 bezierCurveTo() 方法绘制三次贝塞尔曲线，该方法需要三个点：第一、第二个点是控制点，第三个点是终点。三次贝塞尔曲线由起始点、两个控制点和终点来确定，其中起始点是当前路径的最后一个点，或者使用 moveTo() 方法来定义，由于提供了两个控制点，因此可以绘制更加复杂的曲线。属性lineWidth、strokeStyle 和 lineCap 能够改变曲线的样式。

<!DOCTYPE HTML>
<html>
  <head>bezierCurve</head>
  <body>
    <canvas id="container" width="578" height="300"></canvas>
    <script>
      const canvas = document.getElementById('container');
      const ctx = canvas.getContext('2d');

      ctx.beginPath();
      ctx.moveTo(188, 130);
      ctx.bezierCurveTo(140, 0, 388, 10, 388, 170);
      ctx.lineWith = 15;
      ctx.strokeStyle = "red";
      ctx.stroke();
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

← Shapes →