二次贝塞尔曲线:
在平面内选3个不同线的点并且依次用线段连接。如下所示
在AB和BC线段上找出点D和点E,使得 AD/AB = BE/BC
连接DE,在DE上寻找点F,F点需要满足:DF/DE = AD/AB = BE/BC
根据DE线段和计算公式找出所有的F点,记住是所有的F点,然后将其这些点连接起来。
三次贝塞尔曲线:
其实三阶贝塞尔与四阶贝赛尔曲线以及N阶贝赛尔曲线曲线的规则都是一样的,都是先在线段上找点,这个点必须要满足等比关系,然后依次连接,下面是三阶贝赛尔曲线的解释说明:
三阶贝赛尔曲线,简单理解就是在平面内选4个不同线的点并且依次用线段连接
同二阶贝塞尔曲线一样首先需要在线段上找对应的点(E、F、G),对应的点必须要符合等比的计算规则,计算规则如下:AE/AB = BF/BC = CG/CD;找到对应的点以后接着依次链接EF、FG;接着在EF、FG线段上面继续找点H、I,对应的点依旧要符合等比的计算规则,也就是 EH/EF = FI/FG;最后连接H、I线段,在HI线段上面继续找点J、点J的计算规则需要符合:EH/EF = FI/FG = HJ/HI
重复步骤二的动作,找到所有的J点,依次将J点连接起来,这样最终完成了三阶贝赛尔曲线。
整一个三阶贝赛尔曲线的动作加起来就是下面的一张动图:
四次和五次贝塞尔曲线轨迹是这样的:
更多请参考:
https://www.jianshu.com/p/0c9b4b681724
https://www.wanandroid.com/blog/show/2588
绘制贝塞尔曲线
通过前面的介绍,我们可以知道贝塞尔曲线是一种可以用于绘制平滑曲线的数学公式,它可以描述多种曲线,包括圆弧、椭圆、抛物线、三次曲线等等。
在 Canvas 2D API 中,可以使用 quadraticCurveTo()
和 bezierCurveTo()
方法来绘制二次贝塞尔曲线和三次贝塞尔曲线。绘制的时候,除了起点和终点,其它的点我们称之为控制点。
二次贝塞尔曲线绘制:
绘制贝塞尔曲线的时候,需要确定三个点,起点、终点、控制点。控制点是贝塞尔曲线的关键,它可以影响曲线的形状和弯曲程度。语法:
ctx.quadraticCurveTo(cpx, cpy, x, y);
et ctx = c2.getContext('2d')
// 起点坐标(0, 20)
ctx.moveTo(0, 20)
// 控制点坐标(200, 200),终点坐标(350, 50)
ctx.quadraticCurveTo(200, 200, 350, 50)
ctx.stroke();
可以看到会画出一个如下图一样的曲线:
三次贝塞尔曲线绘制:
三次贝塞尔曲线需要四个点来定义:起点、两个控制点和终点。同样地,控制点是决定曲线形状和弯曲程度的关键。
let ctx = c2.getContext('2d')
ctx.moveTo(0, 20)
ctx.bezierCurveTo(80, 240, 180, 30, 350, 50);
ctx.stroke();
绘图效果如下图所示: