Canvas基础篇：二次贝塞尔曲线与三次贝塞尔曲线的对比

前言

在之前的文章中，我们分别讲解了Canvas中的二次贝塞尔曲线和三次贝塞尔曲线，这两者都是创建平滑曲线的重要工具。但它们在数学原理、形状特性和应用场景上既有联系又有区别，本文将详细解析两者的异同，并通过实际案例展示它们的应用方法。

基本概念与数学表达式

二次贝塞尔曲线

二次贝塞尔曲线通过三个点来定义的一条曲线，这三个点分别代表起始点P1、控制点C1 和终点P2，其本质是一个二元一次方程，其参数方程如下：
$$B(t)=(1-t{)}^2{P}_1+2t(1-t)C_1+t^2{P}_2，其中t\in [0,1]。$$
将其展开为极坐标形式如下：
$$x(t)=(1-t{)}^2{x}_1+2t(1-t)c{x}_1+t^2{x}_2$$
$$y(t)=(1-t{)}^2{y}_1+2t(1-t)c{y}_1+t^2{y}_2$$
在Canvas中，使用quadraticCurveTo() 方法绘制二次贝塞尔曲线，其语法如下：

quadraticCurveTo(cx1, cy1, x2, y2)

参数分别为控制点坐标和终点坐标，其曲线示例如下：

三次贝塞尔曲线

三次贝塞尔曲线通过四个点来定义的一条曲线，这四个点分别代表起始点P1、控制点C1、控制点C2 和终点P2，其本质是一个三元一次方程，其参数方程如下：
$$B(t)=(1-t{)}^3{P}_1+3t(1-t{)}^2{C}_1+3t^2(1-t)C2+t^3{P}_2，其中t\in [0,1]。$$
将其展开为极坐标形式如下：
$$x(t)=(1-t{)}^3{x}_1+3t(1-t{)}^{2}c{x}_1+3t^2(1-t)c{x}_2+t^3{x}_2$$
$$y(t)=(1-t{)}^3{y}_1+3t(1-t{)}^{2}c{y}_1+3t^2(1-t)c{y}_2+t^3{y}_2$$
在Canvas中，使用quadraticCurveTo() 方法绘制三次贝塞尔曲线，其语法如下：

bezierCurveTo(cx1, cy1, cx2, cy2, x2, y2)

参数分别为控制点C1坐标、控制点C2坐标和终点坐标，其曲线示例如下：

核心异同点对比

相同点

1. 平滑特性：均能生成连续平滑的曲线，无棱角突变​。
2. 控制点作用：通过调整控制点位置改变曲线形状​。
3. 参数连续性：在 Canvas中均需先通过moveTo()确定起点​。
4. 应用场景：均适用于图形绘制、动画路径、界面交互动效

不同点

选择策略与最佳实践

1. 简单形状优先二次曲线：当只需单一弯曲（如抛物线、简单圆弧替代）时，选择二次曲线，减少计算开销​。
2. 复杂形状必用三次曲线：涉及拐点、双曲率变化（如 S 形、螺旋线近似）时，必须使用三次曲线​。
3. 性能考量：二次曲线计算速度约比三次曲线快 30%，在高频渲染场景（如游戏帧更新）需优先考虑。

结语

二次贝塞尔曲线与三次贝塞尔曲线如同绘图工具箱中的 “螺丝刀” 与 “扳手”，前者擅长简单抛物线场景，后者专精于复杂曲线构建。理解两者的数学本质（控制点数量决定自由度）和视觉特性（拐点存在与否），能帮助我们在实际项目中做出最优选择。