Canvas 2D 贝塞尔曲线
原文中文，约8000字，阅读约需19分钟。
📝
内容提要
本文介绍了贝塞尔曲线的原理和实现方法，通过控制点定义曲线形状，提供了静态和动画绘制的代码示例。
🔎
延伸解读
为什么需要自己实现贝塞尔曲线
Canvas 原生只提供二阶和三阶贝塞尔函数，且只能一次性绘制，无法阶段性绘制，因此不能直接用于动画。当需要更高阶曲线或希望展示绘制过程时，就需要自行实现。文章通过递归降阶的方式，将任意阶贝塞尔曲线分解为一阶运动点的计算，从而支持静态和动画两种绘制模式。
递归降阶的核心思路
实现的关键在于递归降阶：n 个控制点对应 n-1 阶曲线，每层递归用 calcMotionPoint 计算相邻控制点之间的运动点，形成下一阶的控制点集合，直到只剩一个点，该点即为曲线上的点。所有运动点必须同时到达下一相邻点，这保证了递归过程与贝塞尔曲线定义一致。
静态绘制与动画绘制的差异
静态绘制通过循环 t 从 0 到 1，每次调用 drawLines 计算曲线点并增量绘制，最终得到完整曲线。动画绘制则使用 requestAnimationFrame 逐帧更新 t，并利用 Path2D 累积路径，同时清空画布重绘，从而呈现动态绘制效果。两者共用同一套递归计算逻辑，区别仅在于绘制时机和路径管理方式。
❓
Q&A
贝塞尔曲线的基本原理是什么？
贝塞尔曲线由控制点定义形状，通过递归计算运动点来绘制曲线。
如何实现贝塞尔曲线的动画效果？
使用requestAnimationFrame方法动态更新曲线点，实现动画效果。
贝塞尔曲线的阶数如何影响其形状？
一阶贝塞尔曲线为直线，二阶及以上则形成曲线，阶数越高，曲线形状越复杂。
如何通过代码绘制静态贝塞尔曲线？
创建Bezier类，使用控制点绘制曲线，采用增量更新的方法。
贝塞尔曲线的公式推导是怎样的？
贝塞尔曲线的公式通过递归降阶实现，从一阶到高阶逐步计算运动点。
贝塞尔曲线的应用场景有哪些？
贝塞尔曲线广泛应用于计算机图形学、动画设计和汽车造型等领域。
🏷️
