什么是贝塞尔曲线？贝塞尔曲线，也称为贝塞尔曲线或贝塞尔曲线，是应用于二维图形应用的数学曲线。在这条一阶贝塞尔曲线的绘制过程中，黑点按照百分比t从P0->P1移动，什么都看不到~接着继续看下图。这是一条二阶贝塞尔曲线，有一个从P0->P1的小绿点按照百分比t移动。从P1->P2，还有一个按照百分比t移动的小绿点。还有一个小黑点，它会根据两个绿点之间的百分比t移动。这个黑点产生的轨迹是二阶壳塞尔曲线。这是一条三阶贝塞尔曲线。同理，有3个绿点，点与点之间根据百分比t移动，最后得到一个小黑点。这个小黑点的轨迹就是三阶贝塞尔曲线。同理，还有四阶贝塞尔曲线。同样，六阶贝塞尔、N阶贝塞尔。其实在我们的应用中，三阶贝塞尔曲线已经足够满足我们的业务需求了。生活中，多条三阶贝塞尔曲线可以组合成任意一条曲线。我们photoshop中的钢笔工具是3阶贝塞尔曲线实现的。贝塞尔曲线方程的解析数学家给了我们公式：对不起，我把高数还给了老师。这个尼玛公式看不懂~没关系，我们简化一下就可以看懂了。//t为百分比，a为参数//一阶贝塞尔曲线公式函数onebsr(t,a1,a2){returna1+(a2-a1)*t;}//二阶贝塞尔曲线公式函数twobsr(t,a1,a2,a3){return((1-t)*(1-t))*a1+2*t*(1-t)*a2+t*t*a3;}//3阶贝塞尔曲线公式functionthreebsr(t,a1,a2,a3,a4){returna1*(1-t)*(1-t)*(1-t)+3*a2*t*(1-t)*(1-t)+3*a3*t*t*(1-t)+a4*t*t*t;}根据公式，我们可以先带入坐标进行计算/***@descorderBezier*@param{number}t当前百分比*@param{Array}p1起点坐标*@param{Array}p2终点坐标*/oneBezier(t,p1,p2){const[x1,y1]=p1;const[x2,y2]=p2;让x=x1+(x2-x1)*t;让y=y1+(y2-y1)*t;返回[x,y]；}/***@desctwoStepBezier*@param{number}t当前百分比*@param{Array}p1起点坐标*@param{Array}p2终点坐标*@param{Array}cp控制点*/twoBezier(t,p1,cp,p2){const[x1,y1]=p1;const[cx,cy]=cp;const[x2,y2]=p2;让x=(1-t)*(1-t)*x1+2*t*(1-t)*cx+t*t*x2;让y=(1-t)*(1-t)*y1+2*t*(1-t)*cy+t*t*y2；返回[x,y];}/***@desc三阶贝塞尔曲线*@param{number}t当前百分比*@param{Array}p1起点坐标*@param{Array}p2终点坐标*@param{Array}cp1控制点1*@param{Array}cp2控制点2*/threeBezier(t,p1,cp1,cp2,p2){const[x1,y1]=p1;const[x2,y2]=p2;const[cx1,cy1]=cp1;const[cx2,cy2]=cp2;让x=x1*(1-t)*(1-t)*(1-t)+3*cx1*t*(1-t)*(1-t)+3*cx2*t*t*(1-t)+x2*t*t*t;让y=y1*(1-t)*(1-t)*(1-t)+3*cy1*t*(1-t)*(1-t)+3*cy2*t*t*(1-t)+y2*t*t*t;返回[x,y];}算法封装我对贝塞尔曲线进行了封装，添加了获取路径点的方法，然后使用span标签在页面绘制效果来看看DEMO中1~3阶贝塞尔曲线上获取点的效果demo的github地址：https://github.com/mtsee/Bezier
