摘要：到这里，我们就确定了贝塞尔曲线上的一个点。接下来，请稍微回想一下中学所学的极限知识，让选取的点在第一条线段上从起点移动到终点，找出所有的贝塞尔曲线上的点。所有的点找出来之后，我们也得到了这条贝塞尔曲线。
贝塞尔曲线的数学原理
我相信所有射鸡师们都知道贝塞尔曲线是什么，习惯用PS的会用钢笔工具，习惯用AI的会用贝塞尔，因为它所绘制出来的曲线很容易受我们控制也很美观，那么接下来我们来深入了解一下这个贝塞尔曲线的数学原理和公式。
在数学中，贝塞尔又分为很多种，一阶贝塞尔曲线、二阶贝塞尔曲线、三阶贝塞尔曲线····等等等等，除了一阶贝塞尔是直线外剩下的多阶贝塞尔都是抛物线。而它又由起点、终点和控制点组成，根据控制点的个数和位置决定这个曲线的最终样式。
我们先在一个平面内任选 3 个不共线的点，依次用线段连接。如图
在第一条线段上任选一个点 D。计算该点到线段起点的距离 AD，与该线段总长 AB 的比例。
根据上一步得到的比例，从第二条线段上找出对应的点 E，使得 AD:AB = BE:BC。
连接这两点 DE。
从新的线段 DE 上再次找出相同比例的点 F，使得 DF:DE = AD:AB = BE:BC。
到这里，我们就确定了贝塞尔曲线上的一个点 F。接下来，请稍微回想一下中学所学的极限知识，让选取的点 D 在第一条线段上从起点 A 移动到终点 B，找出所有的贝塞尔曲线上的点 F。所有的点找出来之后，我们也得到了这条贝塞尔曲线。
想象不出?没关系，看动画
那么，我们已经大概了解到贝塞尔绘制出来的过程了，下面看公式
1.一阶贝塞尔一阶贝塞尔只有起点和终点，并没有控制点，所以绘制出来的图形仅仅只是一条直线，那么在时间t为1秒的情况下的公式如下
$ B(t)=(1-t)P_0+tP_1 ,tin[0,1] $
2.二阶贝塞尔二阶贝塞尔只存在一个控制点，此时从起点到终点的线段发生变化，具体的变化是由控制点的位置而改变的，图中绿色的线段为红色曲线的切线
$B(t) = (1-t)^2P_0+2t(1-t)P_1+t^2P_2,tin[0,1]$
仅仅只是简单的一元二次方程式
3.高阶贝塞尔三阶
四阶
五阶
从三阶开始贝塞尔就显得复杂了，高阶的通用公式如下
$$ P_i^k=(1-t)P_i^{k-1}+tP_{i+1}^{k-1}$$
$$k=1,2,···,n$$
$$i=0,1,···,n-k$$
可以通过链接动态绘制多阶贝塞尔曲线DEMO
SVG绘制贝塞尔为什么选用SVG而不选择Canvas是因为演示起来简单，而且SVG对矢量图形的渲染更好，也就更适合拿来做几何图形的描绘，而Canvas适合游戏等比较大的渲染
结果如图
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/81357.html
摘要：贝塞尔曲线提供了两个绘制贝塞尔曲线二次贝塞尔曲线，控制点终点三次贝塞尔曲线，控制点一控制点二，终点题外话贝塞尔曲线的数学基础是早在年就广为人知的伯恩斯坦多项式。的属性，取值就可以设置为一个三次贝塞尔曲线方程。 3.4 贝塞尔曲线 canvas提供了两个绘制贝塞尔曲线api: ctx.quadraticCurveTo(cpx, cpy, x, y); 二次贝塞尔曲线，(cpx, cp...
摘要：贝塞尔曲线贝塞尔曲线是应用于二维图形应用程序的数学曲线。通过调整控制点，贝塞尔曲线的形状会发生变化。让我们看看贝塞尔曲线的工作原理。贝塞尔曲线需要四个值，或者更准确地说它需要两对数字。每对描述立方贝塞尔曲线控制点的和坐标。 这是专门探索 JavaScript 及其所构建的组件的系列文章的第 13 篇。 如果你错过了前面的章节，可以在这里找到它们： JavaScript 是如何工作的：...
摘要：动画曲线的应用了解了如何用贝塞尔曲线来指定动画曲线后，很多动画涉及到速度方面的效果就可以实现了，例如小车加速刹车，弹簧动画等速度轨迹都可以根据自己的需要来进行定制。 贝塞尔曲线又叫贝兹曲线，在大学高数中一度让我非常头疼。前阵子练手写动画的时候，发现贝塞尔曲线可以应用于轨迹的绘制以及定义动画曲线。 本文就来探究一下，贝塞尔曲线到底是个什么样的存在。 贝塞尔曲线原理 贝塞尔曲线由n个点来决...
阅读 2972·2021-11-08 13:21
阅读 1038·2021-08-12 13:28
阅读 1289·2019-08-30 14:23
阅读 1803·2019-08-30 11:09
阅读 690·2019-08-29 13:22
阅读 2580·2019-08-29 13:12
阅读 2436·2019-08-26 17:04
阅读 1963·2019-08-26 13:22
