一、甚忙，短言之

最近谷歌那誰誰因為自己的相好被老大搶了，就去小米了！狗血的三角關系要比爛掉的TVB神劇好看多了。

但這只是小菜，貝塞爾曲線才是很角色，因為有外國血統(tǒng)，因此，和CSS3動畫、SVG以及canvas都有基情，基情綻放如盛夏的菊花。

然而，有基情好啊，搞在一起就可以一鍋端了，不是有這么一首歌嘛~

so, 如此一鍋端的好戲怎能錯過呢！

二、認識主角——貝塞爾

考考你，下面哪個貝塞爾是“貝塞爾曲線”的那個貝塞爾？只有一次機會哦！（點擊選擇）

 

回答正確?。?nbsp;

貝塞爾，Pierre Bézier，法國數(shù)學家~

三、貝塞爾曲線作用

貝塞爾曲線作用：曲線、畫曲線、畫美女曲線、規(guī)律可循地畫美女曲線。由于有此特性，所以被SVG, Canvas, CSS3等寵幸，搞基從此開始。

四、如何用貝塞爾曲線畫曲線

如果給你一個點，你能做什么？
答：我能撬動地球………………………………………………模型。

如果給你兩個點，你能做什么？
答：我能畫出地球………………………………………………曲線

是條件不足的。

一個標準的3次貝塞爾曲線需要4個點：起始點、終止點（也稱錨點）以及兩個相互分離的中間點。

無論SVG, Canvas還是CSS3動畫與貝塞爾搞基，都牽扯到這4個點。我們來瞅瞅~~

五、SVG和貝塞爾曲線的基情史

SVG之前有多次介紹，可縮放矢量圖形(Scalable Vector Graphics)、二維、XML標記，類似下面：

<svg width="160px" height="160px">
  <path d="M10 80 ..." />
</svg>

本質(zhì)就是HTML類似東西。

對于設計獅，也是可以把玩SVG的，可以在線繪制，或者在Illustrator中繪制并導出。

SVG的代碼不具體展開（說開了可以連載好幾篇），提一下其中一個path的標簽，可以繪制任意的路徑，自然也包括和貝塞爾搞基。

三次貝塞爾曲線指令：C x1 y1, x2 y2, x y兩個控制點(x1,y1)和(x2,y2)，(x,y)代表曲線的終點。字母C表示特定動作與行為，這里需要大寫，表示標準三次方貝塞爾曲線。

看看下面一些描述貝塞爾曲線的代碼（片段），大家可以好好地感受下（其中字母M表示特定動作moveTo, 指將繪圖的起點移動到此處）。

<svg width="190px" height="160px">
  <path d="M10 10 C 20 20, 40 20, 50 10" stroke="3" fill="none"/>
  <path d="M70 10 C 70 20, 120 20, 120 10" stroke="3" fill="none"/>
  <path d="M130 10 C 120 20, 180 20, 170 10" stroke="3" fill="none"/>
  <path d="M10 60 C 20 80, 40 80, 50 60" stroke="3" fill="none"/>
  <path d="M70 60 C 70 80, 110 80, 110 60" stroke="3" fill="none"/>
  <path d="M130 60 C 120 80, 180 80, 170 60" stroke="3" fill="none"/>
  <path d="M10 110 C 20 140, 40 140, 50 110" stroke="3" fill="none"/>
  <path d="M70 110 C 70 140, 110 140, 110 110" stroke="3" fill="none"/>
  <path d="M130 110 C 120 140, 180 140, 170 110" stroke="3" fill="none"/>
</svg>

曲線效果類似下面這張圖：

可以看到M后面的起點，加C后面3個點，構(gòu)成了貝賽爾曲線的4個點。

六、Canvas與貝塞爾曲線的基情史

Canvas之前也介紹過，HTML 畫布元素，腳本化客戶端繪圖。

其中Canvas有個bezierCurveTo()方法，專門用來和貝塞爾基情纏綿。

代碼走起：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();

開始點：moveTo(20,20)
控制點 1：bezierCurveTo(20,100,200,100,200,20)
控制點 2：bezierCurveTo(20,100,200,100,200,20)
結(jié)束點：  bezierCurveTo(20,100,200,100,200,20)

對比SVG代碼，大家有木有發(fā)現(xiàn)，本質(zhì)上都是一個德行——有個m, 還有3個點。所以，才能基情四射?。?/p>

七、CSS3動畫與貝塞爾曲線的基情史

貝塞爾曲線決定了CS3S動畫那個那個的節(jié)奏~ 是先快后慢呢，還是先慢后快~~

為了更好地搞基，CSS3還專門留了個VIP屬性，叫做cubic-bezier, 直譯為“立方-貝塞爾”，實際上就是指的標準三次方貝塞爾曲線。

具體用法類似：

transition:cubic-bezier(.25,.1,.25,1)

其中.25,.1這個坐標對于起點連接的那個錨點；.25,1這個坐標對于終點頭上那根天線頂端那個點。
//zxx：諸位，擦亮雙眼，兩坐標不是一樣的哦~~

有專門的頁面讓大家感受CSS3動畫如何與貝塞爾曲線搞基的，點擊這里走起：
http:///#.25,.1,.25,1

以上鏈接是個非常好的工具，大家想要什么效果，可以自己調(diào)整，然后copy cubic-bezier相關代碼就可以了。

有人會疑問，CSS3動畫那個cubic-bezier值好像只有兩個點誒~~

那是因為CSS3動畫貝塞爾曲線的起點和終點已經(jīng)固定了，分別是(0,0)和(1,1).

八、搞基史大集合

CSS3似乎稍稍不同步，于是，我們稍作調(diào)整，來個完美同頻率共振開天辟地無敵大搞基：

• CSS3貝塞爾起點是0,0; 終點是1, 1;

  cubic-bezier(x1,y1, x2,y2)

• SVG要想與和上面一起搞基，只要：

  <path d="M0 0 C x1 y1, x2, y2, 1 1"/>

• canvas想要與大家一起搞基，只要：

  ctx.moveTo(0,0);
  ctx.bezierCurveTo(x1,y1,x2,y2,1,1);

其中，完全一致的，x1,y1就是(0,0)頭上插的天線的端點坐標，x2,y2就是(1,1)頭上插的天線的端點坐標。

于是，三者與貝塞爾曲線完美搞基了！撒花，放鞭炮~~ 

九、結(jié)語以及參考內(nèi)容

與我們實際接觸更多應該是CSS3的貝塞爾曲線，擼一遍就發(fā)現(xiàn)貝塞爾曲線其實就是那么個回事，多一點感性直觀認識，處理問題就更加得心應手了，希望本文內(nèi)容能夠?qū)δ膶W習有所幫助。

參考文章：

• 突襲HTML5之SVG 2D入門2 – 圖形繪制
• http:///
• Understanding CSS cubic-bezier
• easing visualization
• 緩動函數(shù)