前端面试题14（贝塞尔曲线）

贝塞尔曲线在前端开发中经常用于创建平滑的动画路径或绘制复杂的矢量图形。贝塞尔曲线可以是一次、二次或三次的，其中三次贝塞尔曲线是最常见的，因为它提供了足够的灵活性来创建各种形状，同时保持计算上的可行性。

下面我将解释三次贝塞尔曲线的基本概念，并给出一个简单的JavaScript实现。

贝塞尔曲线定义

三次贝塞尔曲线由四个点定义：

1. 起点 (P0)：曲线开始的地方。
2. 两个控制点 (P1 和 P2)：它们并不位于曲线上，但影响曲线的形状。
3. 终点 (P3)：曲线结束的地方。

曲线在起点和终点之间，通过控制点的影响形成一条平滑的曲线。曲线的形状可以通过移动控制点来调整。

参数方程

三次贝塞尔曲线的参数方程为：
[ B(t) = (1-t)^3P_0 + 3(1-t)^2tP_1 + 3(1-t)t^2P_2 + t^3P_3 ]
其中 ( t ) 是一个参数，取值范围从 0 到 1，当 ( t=0 ) 时曲线位于起点，当 ( t=1 ) 时曲线位于终点。

JavaScript 实现

下面是一个简单的JavaScript函数，用于计算三次贝塞尔曲线上的点：

function bezierCurve(t, P0, P1, P2, P3) {
    // 计算曲线上的点
    var x = Math.pow(1 - t, 3) * P0.x + 3 * Math.pow(1 - t, 2) * t * P1.x + 3 * (1 - t) * Math.pow(t, 2) * P2.x + Math.pow(t, 3) * P3.x;
    var y = Math.pow(1 - t, 3) * P0.y + 3 * Math.pow(1 - t, 2) * t * P1.y + 3 * (1 - t) * Math.pow(t, 2) * P2.y + Math.pow(t, 3) * P3.y;

    return {x: x, y: y};
}

// 使用示例
var P0 = {x: 0, y: 0};   // 起点
var P1 = {x: 50, y: 100}; // 第一个控制点
var P2 = {x: 100, y: 50}; // 第二个控制点
var P3 = {x: 200, y: 0};  // 终点

// 创建数组来存储曲线上的点
var points = [];
for (var i = 0; i <= 100; i++) {
    var t = i / 100;
    var point = bezierCurve(t, P0, P1, P2, P3);
    points.push(point);
}

这个实现可以用于绘制贝塞尔曲线，也可以用于计算曲线上的点来制作动画。在实际的Web页面中，这些点可以被用来绘制SVG路径或作为canvas中的绘图指令。如果需要在页面上实际看到这条曲线，可以使用requestAnimationFrame来逐点绘制，或者直接使用path元素在SVG中定义路径。