如何使用贝塞尔曲线建模二次方程(计算控制点)

时间:2014-03-06 22:43:28

标签: canvas html5-canvas bezier

我正在使用画布进行射弹运动模拟,我需要绘制射弹路径(轨迹)的线条。我相信最好的方法是使用quadraticCurveTo()方法绘制一条贝塞尔曲线来实现这一点(因为抛物线运动可以用抛物线建模)。

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

2 个答案:

答案 0 :(得分:2)

有更精确的方法来计算二次控制点,但这种近似的近似值有很快计算的好处:

// 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/

答案 1 :(得分:1)

对于形成抛物线的贝塞尔曲线,二阶导数必须是常数。这要求: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)