赛贝尔曲线（二次赛贝尔曲线，三次赛贝尔曲线）

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情

贝塞尔曲线在前端开发中还是非常常见的，今天主要是写一写贝塞尔曲线（二次贝塞尔曲线，三次贝塞尔曲线），并且同时用一个小案例来锻炼一下自己。 今天我直说自己的实践应用，但是里面的一些原理，我自己理解的还不是很透彻，尤其是三次贝塞尔曲线。

二次贝塞尔曲线： ctx.quadraticCurveTo(控制点x,k控制点y,结束点x,结束点y);

起始点，我们自己通过moveTo(x,y)移动到起始点。 我们看这个图（自己动手画的，别嫌弃），画出来的圆弧，与起始点，控制点，结束点连接的线段是相切的，切线。

我们下面用一个小案例来锻炼一下这个的使用技巧。我们利用二次贝塞尔曲线来做一个对话气泡。

     <canvas id="canvas" width="600" height="600" style="background-color: #f1f1f1;"></canvas>
     
     //做的话，我们先气泡的最下面的点开始往上画。
       let c1=document.getElementById('canvas');
      let ctx=c1.getContext('2d');
      ctx.moveTo(200,400);
      ctx.quadraticCurveTo(250,400, 280, 300); 

    
      ctx.quadraticCurveTo(180,300,180,200);
      

    ctx.quadraticCurveTo(180,100,320,100);
      

    ctx.quadraticCurveTo(440,100,440,200);

      ctx.quadraticCurveTo(440,300,320,300);
      

    ctx.quadraticCurveTo(300,400,200,400);

      ctx.strokeStyle ='orange' ;
      ctx.stroke();

最终的效果就是这样的。

说完二次贝塞尔曲线，我们再来说一下三次贝塞尔曲线。

ctx.bezierCurveTo(控制点1x,控制点1y,控制点2x,控制点2y,结束点x,结束点y)

我们利用三次贝塞尔曲线来做一个红心的案例。

<canvas id="canvas" width="600" height="600"></canvas>
 let c1=document.getElementById('canvas');
 let ctx=c1.getContext('2d');
 
  ctx.moveTo(300, 200);
  ctx.bezierCurveTo(200,100, 100, 300, 300, 450);

ctx.bezierCurveTo(500,300,400,100,300,200);

三次贝塞尔曲线其实并没有很理解，只不过是照猫画虎画出来了这个红心。有理解贝塞尔曲线的可以给具体的讲解一下吗？我自己在网上找的课程并没有很讲原理，简单的讲了讲就做了这个案例。