说说如何使用 Canvas 绘制弧线与曲线

喜欢ヅ旅行 2023-03-04 06:59 8阅读 0赞

绘制弧线前，我们需要先了解角度与弧度的概念。

## 1 角度与弧度 ##

**（1）角度**

两条射线从圆心向圆周射出，形成一个夹角和夹角正对的一段弧。当弧长正好等于圆周长的 360 分之一时，两条射线的夹角的大小为1度 。( 单位 :º ）

![format_png][]

**（2）弧度**

两条射线从圆心向圆周射出，形成一个夹角和夹角正对的一段弧。当这段弧长正好等于圆的半径时，两条射线的夹角大小为1弧度（单位：rad)。具体计算公式为：

> rad 即弧度单词 radian 的缩写。

![format_png 1][]

角度转换为弧度，推导与计算公式为：  
![format_png 2][]

## 2 弧线 ##

弧线可以是圆，也可以是圆的一部分。

### 2.1 context.arc() ###

arc() 方法用于创建用于创建圆或部分圆。

语法：`context.arc(x,y,r,startAngle,endAngle,antiClockwise);`

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>x</td> 
   <td>圆中心的 x 坐标。</td> 
  </tr> 
  <tr> 
   <td>y</td> 
   <td>圆中心的 y 坐标。</td> 
  </tr> 
  <tr> 
   <td>r</td> 
   <td>圆的半径。</td> 
  </tr> 
  <tr> 
   <td>startAngle</td> 
   <td>起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。</td> 
  </tr> 
  <tr> 
   <td>endAngle</td> 
   <td>结束角，以弧度计。</td> 
  </tr> 
  <tr> 
   <td>antiClockwise</td> 
   <td>可选。设置以逆时针还是顺时针方向进行绘图。False = 顺时针，true = 逆时针。</td> 
  </tr> 
 </tbody> 
</table>

x 与 y 定义圆心位置；r 定义圆半径，也就是弧线半径；startAngle 与 endAngle 是弧度值；antiClockwise 用于定义弧线的方向。

![format_png 3][]

**（1）圆**

比如绘制一个圆心在 ( 300 ， 300 ) ，半径为 30 的圆：

context.beginPath();
    context.strokeStyle = "black";
    context.lineWidth = 5;
    
    context.arc(300, 300, 30, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
    
    context.stroke();
    context.closePath();

运行结果：

![format_png 4][]

这里先将圆的起始角度 ( 0 ) 和终止角度 (360 ) 先转换为弧度，这样就可以创建一个完整的圆形。

**（2）圆弧**

如果修改圆的起止角度，就可以绘制出一段圆弧。比如我们以顺时针方向绘制 3/4 个圆。

context.arc(350, 350, 30, (Math.PI / 180) * 0, (Math.PI / 180) * 270, false);

运行结果：

![format_png 5][]

也可以改为逆时针绘制，比如这里从 0 到 270 度，逆时针绘制圆弧：

context.arc(350, 350, 30, 0, (Math.PI / 180) * 270, true);

![format_png 6][]

### 2.2 arcTo() 方法 ###

arcTo() 方法用于在画布上绘制介于两个切线之间的弧。

语法：`context.arcTo(x1,y1,x2,y2,r);`

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>x1</td> 
   <td>弧的起点的直线相切 x 坐标。</td> 
  </tr> 
  <tr> 
   <td>y1</td> 
   <td>弧的起点的直线相切 y 坐标。</td> 
  </tr> 
  <tr> 
   <td>x2</td> 
   <td>弧的终点 x 坐标。</td> 
  </tr> 
  <tr> 
   <td>y2</td> 
   <td>弧的终点 y 坐标。</td> 
  </tr> 
  <tr> 
   <td>r</td> 
   <td>弧的半径。</td> 
  </tr> 
 </tbody> 
</table>

context.moveTo(20,20);           // 创建开始点
    context.lineTo(100,20);          // 创建水平线
    context.arcTo(150,20,150,70,50); // 创建弧
    context.lineTo(150,120);         // 创建垂直线

运行结果：

![format_png 7][]

arcTo() 函数会以给定的半径绘制出一条弧线，圆弧的起点与 (x1,y1) 直线相切，圆弧的终点（x2,y2）与点 (x1,y1) 直线相切。

![format_png 8][]

## 3 贝塞尔曲线 ##

贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。贝塞尔曲线是计算机图形学中相当重要的参数曲线，在一些比较成熟的位图软件中也有贝塞尔曲线工具，如PhotoShop等。

由于用计算机画图大部分时间是操作鼠标来掌握线条的路径，与手绘的感觉和效果有很大的差别。即使是一位精明的画师能轻松绘出各种图形，拿到鼠标想随心所欲的画图也不是一件容易的事。这一点是计算机万万不能代替手工的工作，所以人们只能颇感无奈。使用贝塞尔工具画图很大程度上弥补了这一缺憾。

![format_png 9][]

贝塞尔曲线 贝塞尔曲线是计算机图形图像造型的基本工具，是图形造型运用得最多的基本线条之一。它通过控制曲线上的四个点（起始点、终止点以及两个相互分离的中间点）来创造、编辑图形。其中起重要作用的是位于曲线中央的控制线。这条线是虚拟的，中间与贝塞尔曲线交叉，两端是控制端点。移动两端的端点时贝塞尔曲线改变曲线的曲率（弯曲的程度）；移动中间点（也就是移动虚拟的控制线）时，贝塞尔曲线在起始点和终止点锁定的情况下做均匀移动。注意，贝塞尔曲线上的所有控制点、节点均可编辑。这种“智能化”的矢量线条为艺术家提供了一种理想的图形编辑与创造的工具。

### 3.1 平方贝塞尔曲线 ###

平方贝塞尔曲线又称为二次贝塞尔曲线。二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。所以如果路径不存在，那么需要先使用 beginPath() 和 moveTo() 方法来定义开始点。

语法：`context.quadraticCurveTo(cpx,cpy,x,y);`

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>cpx</td> 
   <td>贝塞尔控制点的 x 坐标</td> 
  </tr> 
  <tr> 
   <td>cpy</td> 
   <td>贝塞尔控制点的 y 坐标</td> 
  </tr> 
  <tr> 
   <td>x</td> 
   <td>结束点的 x 坐标</td> 
  </tr> 
  <tr> 
   <td>y</td> 
   <td>结束点的 y 坐标</td> 
  </tr> 
 </tbody> 
</table>

context.moveTo(100,100);
    context.quadraticCurveTo(200,125,100,150);

运行结果：  
![format_png 10][]

通过起点、终点以及一个决定曲线走向的控制点来定义一条平方贝塞尔曲线。

![format_png 11][]

--------------------

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zMzg2MTA4LTEzMDliNzk0Yjk5ZGQ5M2QuZ2lm][]

### 3.2 立方贝塞尔曲线 ###

立方贝塞尔曲线又叫三次贝塞尔曲线。三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么也是需要先使用 beginPath() 和 moveTo() 方法来定义开始点。

语法：`context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);`

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>cp1x</td> 
   <td>第一个贝塞尔控制点的 x 坐标</td> 
  </tr> 
  <tr> 
   <td>cp1y</td> 
   <td>第一个贝塞尔控制点的 y 坐标</td> 
  </tr> 
  <tr> 
   <td>cp2x</td> 
   <td>第二个贝塞尔控制点的 x 坐标</td> 
  </tr> 
  <tr> 
   <td>cp2y</td> 
   <td>第二个贝塞尔控制点的 y 坐标</td> 
  </tr> 
  <tr> 
   <td>x</td> 
   <td>结束点的 x 坐标</td> 
  </tr> 
  <tr> 
   <td>y</td> 
   <td>结束点的 y 坐标</td> 
  </tr> 
 </tbody> 
</table>

context.moveTo(150,0);
    context.bezierCurveTo(0,125,300,175,150,300);

运行结果：  
![format_png 12][]

三次贝塞尔曲线总共需要 4 个点（开始点、结束点以及两个控制点）。

![format_png 13][]

--------------------

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zMzg2MTA4LTkxNTE3MmY2MWY1YWFkOWQuZ2lm][]

除了二次、三次贝塞尔曲线之外，还有更高阶的贝塞尔曲线。

4阶贝塞尔曲线：  
![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zMzg2MTA4LWM5Yjc0ZTFkMjQ5MDk2YzAuZ2lm][]

5阶贝塞尔曲线：

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zMzg2MTA4LTVjMjZmNTYzYzljMTcxMTIuZ2lm][]

4阶贝塞尔曲线有3个控制点，而5阶贝塞尔曲线有4个控制点。

[format_png]: /images/20230208/9cce897794eb441eb3fd4f04fbd24b21.png
[format_png 1]: /images/20230208/867ac21e445b4f93b9a615b7e272e99e.png
[format_png 2]: /images/20230208/572e9c0c6dd24f389df03d0a2ea27549.png
[format_png 3]: /images/20230208/90c4bce7b4664b4ab61bb3707bb3517f.png
[format_png 4]: /images/20230208/9506b6e8aeff4442bf73bff5b018f1a0.png
[format_png 5]: /images/20230208/a7ed2b0962c04025bb6f3bc178784116.png
[format_png 6]: /images/20230208/c75eb15cc43d41cc91e4e47999ce01be.png
[format_png 7]: /images/20230208/c7cf0da4e1d447568de3eb9f3f16ad8c.png
[format_png 8]: /images/20230208/ba4cf3bae42342a38c3787d4fccc2012.png
[format_png 9]: /images/20230208/3f6c77cca8fb413c9c2bc8cef71357f4.png
[format_png 10]: /images/20230208/4481a7baf68d4ab1ae7883837864f609.png
[format_png 11]: /images/20230208/34d4f47570bc43fcb7a7951351236ddf.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zMzg2MTA4LTEzMDliNzk0Yjk5ZGQ5M2QuZ2lm]: /images/20230208/225899e2c3a1416bb9894d334b90f035.png
[format_png 12]: /images/20230208/afc91f72aa224c71b6d8179aea55d32d.png
[format_png 13]: /images/20230208/9b0c2660624d4d78a0d66d82f021c256.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zMzg2MTA4LTkxNTE3MmY2MWY1YWFkOWQuZ2lm]: /images/20230208/f5da0f20ee3a4efbac39454a2c670249.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zMzg2MTA4LWM5Yjc0ZTFkMjQ5MDk2YzAuZ2lm]: /images/20230208/7a4353f914ae41f58d23c03abe8e9c2e.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zMzg2MTA4LTVjMjZmNTYzYzljMTcxMTIuZ2lm]: /images/20230208/9fced8a884514c1688bce5254ce446c4.png