使用Fabric.js实现贝塞尔曲线波浪特效

一、前言

本文是在此基础上收到启发然后进行的变化，当然，观看与否不会影响接下来的阅读体验。

二、实现思路

其实整个波浪动画其实可以看成：在相对坐标系静止的视角下，一个正弦函数在直角坐标系上匀速平移时我们所观察到的效果。根据所选参照系的不同，我们也可以看成是：坐标系上有个点，我们在相对点静止的视角下，一个点在坐标系上按着正弦函数的规律来进行移动，此时我们所观察到的点走过的痕迹的变化就是波浪的动画效果。从绘制角度来说，就是我们要绘制一条曲线按照正弦函数的规律去变化。在canvas中，能让曲线以正弦函数方式绘制的其中一个方法就是使用canvas提供的贝塞尔曲线绘制方法。

canvas提供的贝塞尔曲线方法有很多变种，比如一次贝塞尔、二次贝塞尔、三次贝塞尔等等，在这里我们主要使用了三次贝塞尔，三次贝塞尔曲线有一个起点、终点和两个控制点。其他的在此不做讨论。

言归正传，来讲讲Fabric.js。Fabric.js 没有提供类似于canvas中的绘制贝塞尔曲线的API(quadraticCurveTo、bezierCurveTo等)，但是在线段绘制类Path里，Fabric.js引入了SVG中path元素的线段绘制写法，而这就让我们在Fabric.js中绘制贝塞尔曲线的梦想得以触手可及。

在这里我们简单介绍一下SVG中path元素的部分语法:

2.1、M（moveto）移动和L（lineto）画直线

其中 M 表示移动到某点，L 表示画一条直接到某点，后面跟一个坐标点，建议格式如下：

"M x y" // M是命令：x横轴坐标、y纵轴坐标
"L x y" // L是命令：x横轴坐标、y纵轴坐标 

2.2、 Z（cloasPath）闭合

结束点到开始点画一条直线，形成一个闭合的区域。

语法格式就是在字符串的最后写一个Z，表示闭合。

2.3、C（curveto）三次贝塞尔曲线

三次贝塞尔曲线有一个起点、终点和两个控制点，跟二次贝塞尔相比多了一个控制点，如图，P0、P3是起点和终点，P1、P2是控制点。