如何動態繪製「漂亮」的貝塞爾曲線？

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(); 

如果你想看到它們的傾斜狀的是，計算控制點要稍微複雜一些。