如何动态绘制“漂亮”的贝塞尔曲线？

Question

我做了一个小提琴：https://jsfiddle.net/ahvonenj/yp0o728h/

可以按左键单击向下移动的红色圆圈，并在两点之间绘制的贝塞尔曲线被更新，而不是在一个方式，我想它的工作。

我想动态计算的控制点，使曲线看起来是这样的：

方案A：

案例B：

案例C：

所以基本上我希望曲线始终形成一个从A点到B点的小“美丽”曲线，而不管点如何定位。画一条直线看起来不太漂亮，所以我想用贝塞尔曲线使曲线稍微弯曲。

问题在于计算控制点的位置。这是如何实现的，是否有一种简单的方法来实现它，因为我看到许多应用程序似乎都在使用动态贝塞尔曲线。

由于代码被陪的jsfiddle链接要求，这里是目前绘制静态控制点的贝塞尔曲线行：

ctx.bezierCurveTo(20, 100, 200, 100, c2.x, c2.y); 

我希望我没有做大量的计算来与控制点的位置。

Answer 1

不是大规模的计算：https://jsfiddle.net/khrismuc/6fjhLkbv/

var dx = c2.x - c1.x; 
var dy = c2.y - c1.y; 

ctx.beginPath(); 
ctx.moveTo(c1.x, c1.y); 
ctx.bezierCurveTo(c1.x + dx * 0.33, c1.y, c1.x + dx * 0.67, c2.y, c2.x, c2.y); 
ctx.stroke(); 

如果你想看到它们的倾斜状的是，计算控制点要稍微复杂一些。