8-2 曲尽其妙-贝塞尔曲线绘制

汇报人：xxx时间：2026二号任务曲尽其妙——贝塞尔曲线绘制任务说明01（1）动手推导二次贝塞尔曲线和三次贝塞尔曲线公式，并了解其与杨辉三角形的关系。（2）使用贝塞尔曲线的高级技巧为博客页面设计一个专属logo，并将其放置在页面的左上方。二号任务任务说明知识准备0201贝塞尔曲线的定义与应用目录常见贝塞尔曲线的公式02贝塞尔曲线的高级技巧031.贝塞尔曲线的定义与应用知识准备（1）贝塞尔曲线的定义贝塞尔曲线是一种由“控制点”定义的数学曲线，常用于计算机图形学和矢量图形设计中。它由法国工程师Bézier在20世纪60年代提出。贝塞尔曲线的重要特性是，它的形状由一组离散控制点（也称为控制节点）决定，通过这些控制点生成平滑、连续的曲线。（2）贝塞尔曲线的应用领域贝塞尔曲线作为参数化曲线的数学工具，广泛应用于计算机图形学和数字设计，主要的应用领域如图所示。2.常见贝塞尔曲线的公式知识准备贝塞尔曲线可以按照控制点的数量来划分，根据控制点数量的不同，贝塞尔曲线的数学表达式和形状也会发生变化。常见的贝塞尔曲线种类包括线性贝塞尔曲线（LinearBezierCurve）、二次贝塞尔曲线（QuadraticBezierCurve）和三次贝塞尔曲线（CubicBezierCurve）。下面通过一组图片来直观理解二次贝塞尔曲线的绘制过程。2.常见贝塞尔曲线的公式知识准备（1）绘制二次贝塞尔曲线。先在一个平面内任选3个不共线的点，依次用线段连接，如图所示。（2）在第一条线段上任选一个点D。计算该点到线段起点A的距离AD与该线段总长AB的比例，如图所示。（3）根据上一步得到的比例，从第二条线段上找出对应的点E，使得AD:AB=BE:BC，如图8-2-5所示。（4）连接点D、E，如图8-2-6所示。（5）从新的线段DE上再次找出点F，使得DF:DE=AD:AB=BE:BC，如图所示。（6）目前确定了贝塞尔曲线上的一个点F。之后让选取的点D在第一条线段上从起点A移动到终点B，找出所有符合这个比例变换的点就得到了贝塞尔曲线，如图所示。2.常见贝塞尔曲线的公式知识准备下面来推导不同贝塞尔曲线的公式。（1）线性贝塞尔曲线公式的推导已知：两个点P₀和P₁，参数t∈[0,1]。目标：找到一个点B(t)，它在P₀和P₁之间做线性插值。公式推导过程如下。B(t)=P0+t(P1-P0) =P0+tP1-tP0 =P0(1-t)+P1t =(1-t)P0+tP1这就像是在两点之间拉一根橡皮筋，你的手指在橡皮筋上滑动。线性贝塞尔曲线实现示例代码运行结果如图所示。2.常见贝塞尔曲线的公式知识准备（2）二次贝塞尔曲线公式的推导已知：3个点P₀、P₁、P₂，参数t∈[0,1]。目标：通过两次线性插值得到最终曲线。公式推导过程如下。①在P0P1和P1P2之间分别做线性插值：Q0(t)=(1-t)P0+tP1 Q1(t)=(1-t)P1+tP2 ②在Q0和Q1之间做线性插值：B(t)=(1-t)Q0(t)+tQ1(t) ③展开Q0(t)项：(1-t)Q0(t)=(1-t)[(1-t)P0+tP1]=(1-t)P0+(1-t)tP1④展开tQ1(t)项：tQ1(t)=t[(1-t)P1+tP2]=t(1-t)P1+t²P2⑤合并所有项B(t)=(1-t)P0+(1-t)tP1+t(1-t)P1+t²P2=(1-t)P0+2(1-t)tP1+t2P2 二次贝塞尔曲线实现示例代码运行结果如图所示。2.常见贝塞尔曲线的公式知识准备（3）三次贝塞尔曲线公式的推导已知：4个点P₀、P₁、P₂、P₃，参数t∈[0,1]。目标：通过3次线性插值得到最终曲线.公式推导过程如下。①在P0与P1、P1与P2、P2与P3之间分别做线性插值：Q0(t)=(1-t)P0+tP₁Q1(t)=(1-t)P1+tP2 Q2(t)=(1-t)P2+tPз ②在Q0与Q1、Q1与Q2之间做线性插值：R0(t)=(1-t)Q0(t)+tQ1(t) R1(t)=(1-t)Q1(t)+tQ2(t) ③在R0和R1之间做线性插值：B(t)=(1-t)R0(t)+tR1(t)④展开R0(t)项：R0(t)=(1-t)[(1-t)P0+tP1]+t[(1-t)P1+tP2]=(1-t)2P0+(1-t)tP1+t(1-t)P1+t²P2=(1-t)2P0+2t(1-t)P1+t²P2⑤展开R1(t)项：R1(t)=(1-t)[(1-t)P1+tP2]+t[(1-t)P₂+tP3]=(1-t)²P1+(1-t)tP₂+t(1-t)P₂+t²Pз=(1-t)2P1+2t(1-t)P2+t²Pз⑥最后一次线性插值：B(t)=(1-t)R0(t)+tR1(t)⑦完全展开并整理：B(t)=(1-t)3P0+3t(1-t)2P1+3t2(1-t)P2+t³P3二次贝塞尔曲线实现示例代码运行结果如图所示。3.贝塞尔曲线的高级技巧知识准备（1）动态调整控制点实现曲线变化下面的代码可以展示贝塞尔曲线的动态控制效果（以三次贝塞尔曲线为例），这个示例将包含可拖动的控制点和实时更新的曲线。3.贝塞尔曲线的高级技巧知识准备（2）使用多段贝塞尔曲线绘制复杂路径任务实现03任务实现（1）创建logo.js文件，使用贝塞尔曲线的高级技巧为博客页面绘制一个简单的logo。（2）使用多段贝塞尔曲线绘制复杂路径，为logo进行细节处的设计。

我们可以借助AI助手来完成代码，向AI助手提问：使用JavaScript中的