貝塞爾曲線在CSS動畫中和canvas、svg繪圖中都是比較重要的一個東西！所以我來好好的小結一下關於它的一些東西。
什麼是貝塞爾曲線
貝塞爾曲線於1962，由法國工程師皮埃爾·貝塞爾（Pierre Bézier）所廣泛發表，他運用貝塞爾曲線來爲汽車的主體進行設計。貝塞爾曲線最初由Paul de Casteljau於1959年運用de Casteljau演算法開發，以穩定數值的方法求出貝茲曲線。
貝塞爾曲線被廣泛用於製圖軟件中。
以前描述曲線並沒有很好的方法，直到它的出現。
如果你用過PS、AI之類的製圖軟件，想必一定會很好理解。
你可以登錄https://bezier.method.ac/這個網站，在線學習體驗使用PS中的鋼筆工具，進行繪製各種形狀的圖案。
二次貝塞爾曲線
二次貝塞爾曲線，我們要繪製出來需要指定：
- 起點
- 終點
- 控制點
我們可以看到如圖所示，在控制點和起點的中點，連接上了控制點與終點的中點，這根線的終點，就是與曲線相交的一個點。
可以認爲控制點像一個磁鐵一樣，把線吸了過去。
多邊二次貝塞爾曲線
可以看到有兩個控制點，這樣連續畫出來了。
如果想要連貫的曲線，那麼它們的控制點應該是中心對稱的。
三次貝塞爾曲線
三次貝塞爾曲線可以包括一個拐點。
它擁有兩個控制點，兩個控制點中間的中點，分別連接控制點與起點、終點的連線的中點。這兩根線的中點分別相連接，這個中點就是和曲線相交的地方（有點繞，看圖就明白了！）
這一般也是繪圖軟件裏常用的：
應用
在CSS中的應用
我們可以指定動畫的運動曲線。在CSS中運用的也是三次貝塞爾曲線。
cubic-bezier(控制點x1, 控制點y1, 控制點x2, 控制點y2)
這個代表的是速度曲線，也就是y值是速度，可以看到粉紅色和藍色的圓點就是兩個控制點：
而我們CSS中內置的一些默認的屬性值，實際上是存了貝塞爾曲線的一些預設:
更多可以在：貝塞爾CSS在線體驗 這裏進行體驗。
SVG
在SVG中定義一個二次貝塞爾曲線，用字母Q來表示，緊跟控制點和終點座標：
<path d="M30 75 Q240 30, 300 120" style="stroke: black; fill: none;"/>
意思是，我們繪製一條路徑，先把點Move（M）移動到(30, 75)的位置，然後開始繪製！
以(240, 30)爲控制點，曲線的終點是(300, 120)。
如果我們要繪製多邊二次貝塞爾曲線，直接在Q後面繼續跟兩組座標：
Q 80 30, 100 100, 130 65, 200 80
比如這組數據，就是在(100, 100)畫完一邊後，繼續以(130, 65)爲控制點，畫到(200, 80)爲終點。
然後，我們提到之前的中心對稱問題，可以直接使用T字母來表示中心對稱的控制點。
Q 80 30, 100 100, T, 200 80
如果我們要繪製三次貝塞爾曲線，後面跟着的座標組就有3個，分別就是起點的控制點、終點的控制點和端點（終點）。用字母C來開頭指定。
M20 80, C 50 20, 150 60, 200 120
另外還有字母S開頭，S x2 y2 x y，表示用x2 y2作爲控制點，第一個控制點是前一個C命令的終點控制點的中心對稱點。（如果前一個曲線不存在，當前點就是第一個控制點）
canvas
在canvas中使用quadraticCurveTo繪製二次貝塞爾曲線，參數分別爲控制點和終點的x,y值。
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(20, 100, 200, 20)'
ctx.stroke();
bezierCurveTo繪製三次貝塞爾曲線。參數爲起點控制點、終點控制點和終點的x、y值。
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20)'
ctx.stroke();
最後
本文是根據自己的一些小積累和資料查找總結出來的，如果有錯誤歡迎指正^_^，謝謝。