摘要：貝塞爾曲線提供了兩個(gè)繪制貝塞爾曲線二次貝塞爾曲線，控制點(diǎn)終點(diǎn)三次貝塞爾曲線，控制點(diǎn)一控制點(diǎn)二，終點(diǎn)題外話貝塞爾曲線的數(shù)學(xué)基礎(chǔ)是早在年就廣為人知的伯恩斯坦多項(xiàng)式。的屬性，取值就可以設(shè)置為一個(gè)三次貝塞爾曲線方程。

canvas提供了兩個(gè)繪制貝塞爾曲線api:

ctx.quadraticCurveTo(cpx, cpy, x, y);
二次貝塞爾曲線，(cpx, cpy)控制點(diǎn) (x, y)終點(diǎn)
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
三次貝塞爾曲線，(cp1x, cp1y)控制點(diǎn)一, (cp2x, cp2y)控制點(diǎn)二， (x, y)終點(diǎn)

題外話：

貝塞爾曲線的數(shù)學(xué)基礎(chǔ)是早在 1912 年就廣為人知的伯恩斯坦多項(xiàng)式。最早用來(lái)輔助汽車車體的工業(yè)設(shè)計(jì)。
CSS3的transition-timing-function屬性，取值就可以設(shè)置為一個(gè)三次貝塞爾曲線方程transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1)。

canvas繪圖示例：

// 二次
ctx.moveTo(200, 100);
ctx.quadraticCurveTo(230, 250, 350, 200);
// 三次
ctx.moveTo(450, 250);
ctx.bezierCurveTo(530, 150, 650, 300, 700, 200);

藍(lán)色是控制點(diǎn)

問(wèn)題一：
那canvas是如何通過(guò)控制點(diǎn)來(lái)繪制出曲線的，或者如果不用這個(gè)，自己繪制曲線該如何操作呢：

這個(gè)是n階貝塞爾曲線的方程：

我們重點(diǎn)看二(三)階方程：

B(t)是曲線上的點(diǎn)，t在0~1之間取值， P0起始點(diǎn)，P2終點(diǎn)，P1控制點(diǎn)
t從0~1之間取值不斷增大，B(t)不斷取出曲線上的點(diǎn)，從P0移至P1

const bx = (1-t)*(1-t)*start.x + 2*t*(1-t)*control.x + t*t*end.x;
const by = (1-t)*(1-t)*start.y + 2*t*(1-t)*control.y + t*t*end.y;

問(wèn)題二：
我咋知道控制點(diǎn)該怎么選，特別是起終點(diǎn)動(dòng)態(tài)數(shù)據(jù)時(shí)(也就是說(shuō)，我們使用時(shí)，往往只知道起點(diǎn)P0終點(diǎn)P1)：

這個(gè)根據(jù)曲線斜率，可視化需求可能選取的方式不一致，不過(guò)大致原理相似
可以在起點(diǎn)和終點(diǎn)的垂直平分線上選一點(diǎn)作為控制點(diǎn), 然后用一個(gè)參數(shù)來(lái)控制曲線的彎曲程度

// curveness 彎曲程度(0-1)
const cp = {
  x: ( start.x + end.x ) / 2 - ( start.y - end.y ) * curveness,
  y: ( start.y + end.y ) / 2 - ( end.x - start.x ) * curveness
};

題外話：

關(guān)于cp點(diǎn)的求解：
線段中點(diǎn):
const mid = [ ( start.x + end.x) / 2, ( start.y + end.y  ) / 2 ];
根據(jù)起點(diǎn)和終點(diǎn)也可以得到一個(gè)向量v: 
const v = [ end.x - start.x, end.y- start.y ]; 
將這個(gè)向量順時(shí)針旋轉(zhuǎn)90度，得到一個(gè)垂直于它的向量v2:
const v2 = [ v.y, -v.x ];
那么中間控制點(diǎn)的坐標(biāo)為(向量v2乘curveness加上中間點(diǎn)坐標(biāo))
const cp = { x: mid.x + v2.x  curveness, y: mid.y + v2.y  curveness} =
 {    x:( start.x + end.x ) / 2 - ( start.y - end.y ) * curveness,
   y:( start.y + end.y ) / 2 - ( end.x - start.x ) * curveness}