认识贝塞尔曲线

贝塞尔曲线是CSS动画、canvas、svg绘图中很重要的一个东西！因此，让我简要总结一下有关它的一些事情。什么是贝塞尔曲线贝塞尔曲线是法国工程师皮埃尔·贝塞尔于1962年广泛发表的，他利用贝塞尔曲线设计汽车主体。贝塞尔曲线最初是由PauldeCasteljau于1959年使用deCasteljau算法得到具有稳定数值方法的贝塞尔曲线。贝塞尔曲线广泛用于图形软件中。在它出现之前，过去没有很好的方法来描述曲线。如果你用过PS、AI等绘图软件，那你一定很了解。可以登录网站https://bezier.method.ac/在线学习，使用PS中的钢笔工具绘制各种形状的图案。QuadraticBeziercurve二次贝塞尔曲线，如果我们要画它，需要指定：起点和终点控制点我们可以看到，如图所示，控制点和终点连在的中点控制点和起点中点，这条线的终点，是曲线相交的点。可以认为控制点就像一块磁铁，吸引着线。可以看出多边形二次贝塞尔曲线有两个控制点，连续绘制。如果需要连贯曲线，那么它们的控制点应该是中心对称的。三次贝塞尔曲线三次贝塞尔曲线可能包含一个拐点。它有两个控制点，两个控制点之间的中点，以及控制点分别与起点和终点连线的中点。这两条线的中点分别相连，这个中点就是曲线相交的地方（有点扭曲，看图就明白了！）这也是绘图软件中常用的：我们可以在CSS运动曲线的应用。三次贝塞尔曲线也用在CSS中。cubic-bezier(controlpointx1,controlpointy1,controlpointx2,controlpointy2)表示速度曲线，即y值是速度，可以看到粉色和蓝色的点是两个控制点：我们CSS中内置的一些默认属性值，实际上存储了一些贝塞尔曲线的预设：更多可以在这里体验：BezierCSS在线体验。SVG在SVG中定义了一条二次贝塞尔曲线，用字母Q表示，后面是控制点和终点的坐标：的意思是，我们画一条路径，先把点Move(M)移动到(30,75)的位置，然后开始画！以(240,30)为控制点，曲线终点为(300,120)。如果我们要画一个多边形的二次贝塞尔曲线，直接在Q后面加上两组坐标：Q8030,100100,13065,20080例如这组数据是在(100,100)画完一侧后，继续以(130,65)为控制点，画至(200,80)为终点。那么，我们之前提到的中心对称问题，可以直接用字母T来表示中心对称控制点。Q8030,100100,T,20080如果我们要画一条三次贝塞尔曲线，后面有3个坐标组，分别是起点控制点、终点控制点和终点（终点）。以字母C开头的代号，M2080、C5020、15060、200120也以字母S开头，Sx2y2xy，表示以x2y2为控制点，第一个控制点为上一个C指令结束控制点的中心对称点。（如果之前的曲线不存在，则当前点为第一个控制点）canvas使用quadraticCurveTo在画布中绘制二次贝塞尔曲线，参数为控制点和终点的x和y值.ctx.beginPath();ctx.moveTo(20,20);ctx.quadraticCurveTo(20,100,200,20)'ctx.stroke();bezierCurveTo绘制三次贝塞尔曲线。参数是开始控制点、结束控制点和结束点的x和y值。ctx.beginPath();ctx.moveTo(20,20);ctx.bezierCurveTo(20,100,200,100,200,20)'ctx.stroke();最后，本文是根据自己的一些小积累和资料搜索总结出来的，如有错误，请指正^_^，谢谢。