如何使用贝塞尔曲线对二次方程建模（计算控制点）答案

【问题标题】：How to model quadratic equation using a bezier curve (calculate control point)如何使用贝塞尔曲线对二次方程建模（计算控制点）
【发布时间】：2014-03-06 22:43:27
【问题描述】：

我正在使用画布进行弹丸运动模拟，我需要绘制弹丸路径（轨迹）的线。我相信最好的方法是使用 quadraticCurveTo() 方法绘制贝塞尔曲线来完成此操作（因为抛物线运动可以用抛物线建模）。

我知道抛物线的起点和终点以及最大值，但我不确定如何计算贝塞尔曲线的控制点。

【问题讨论】：

实际上，贝塞尔曲线对于弹丸轨迹非常可怕，因为时间参数与距离不是线性的。对于射弹，您只想使用更简单且正确的物理抛物线函数。
什么是正确的物理抛物线函数？
“在物理学方面是正确的”。对象轨迹通常遵循抛物线路径，即 y 以 x 表示。使用 Bezier 曲线绘制抛物线函数相对容易，但您不想将 Bezier 用于纯粹绘图以外的任何事情。

标签： canvas html5-canvas bezier

【解决方案1】：

有更精确的方法来计算二次控制点，但这种近似的好处是计算速度非常快：

// calc a control point
var cpX = 2*anywhereOnCurveX -startX/2 -endX/2;
var cpY = 2*anywhereOnCurveY -startY/2 -endY/2;

这是一个现场演示，它计算给定起点、终点和曲线上任何点（起点/终点以外的任何点）的近似控制点：

http://jsfiddle.net/m1erickson/6jNCM/

【讨论】：

这是多少“近似值”？
这个计算是基于区间T=0.50，所以如果你提供曲线的起点、终点和中点，计算将是完美的。这似乎最适合您从 A 向 B 发射弹丸并且您拥有顶点的需求。祝你的项目好运！

【解决方案2】：

要形成抛物线的贝塞尔曲线，二阶导数必须是常数。这需要：P0 - 3 * P1 = P3 - 3 * P2。

可以使用以下控制点：

P0 = (x - w, y)
P1 = (x - w/3, y + h)
P2 = (x + w/3, y + h)
P3 = (x + w, y)

【讨论】：

h 和 w 是什么？