贝塞尔曲线

拖动 P0–P3 四个控制点,实时绘制三阶(Cubic)贝塞尔曲线。同时输出关键采样坐标与两端切线斜率,帮助理解缓动、动画路径与 CSS cubic-bezier() 的几何含义。

控制点 等待拖动

可直接在画布上拖动四个控制点,或在下方输入精确坐标。曲线为 P0/P3 端点与 P1/P2 控制杆决定的三阶贝塞尔。

计算结果
起点切线—
终点切线—
曲线长度—
CSS 表达式—
拖动控制点后,t = 0 / 0.25 / 0.5 / 0.75 / 1 的采样坐标与切线将显示在这里。

采样:对 t∈[0,1] 等距取 5 个点,按 B(t) 计算曲线坐标;切线斜率 dy/dx 用于判断缓动快慢。

计算说明
  • 曲线方程:B(t)=(1−t)³P0+3(1−t)²tP1+3(1−t)t²P2+t³P3,t∈[0,1]。
  • 起点切线方向 = P1−P0,终点切线方向 = P3−P2;斜率 = Δy/Δx(Δx 为 0 时按垂直处理)。
  • 曲线长度采用 64 段折线近似,仅作数量级参考,非解析解。
  • 采样点 t = 0, 0.25, 0.5, 0.75, 1,四舍五入保留 3 位小数。
  • 全部计算在浏览器本地完成,无网络请求。