初識貝塞爾曲線

貝塞爾曲線在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();

最後

本文是根據本身的一些小積累和資料查找總結出來的，若是有錯誤歡迎指正^_^，謝謝。