貝塞爾(貝茲爾)曲線介紹

什麼是貝塞爾曲線？

“貝賽爾曲線”是由法國數學家Pierre Bézier所發明，由此為計算機矢量圖形學奠定了基礎。它的主要意義在于無論是直線或曲線都能在數學上予以描述。貝塞爾曲線就是這樣的一條曲線，它是依據四個位置任意的點坐标繪制出的一條光滑曲線。

“貝賽爾”工具在photoshop中叫“鋼筆工具”；在CorelDraw中翻譯成“貝賽爾工具”；而在Fireworks中叫“畫筆”。它是用來“畫線”造型的一種專業工具。

貝塞爾曲線有一階，二階，三階，高階。一般計算機中使用三階的。

想看原理的，點選這個連結http://www.cnblogs.com/hnfxs/p/3148483.html

其有4個點：起始點，2個中間點，結束點。

此曲線經常被SVG，Canvas，CSS3所使用。

SVG上使用

使用SVG的path可以支援畫貝塞爾曲線:

<svg width="160px" height="160px">
  <path d="M10 10 C 20 20, 40 20, 50 10" stroke="3" fill="none"/>
</svg>
           

M指的是MoveTo(10, 10)這個點(起始點)。然後C就是開始畫曲線，需要指定剩下的三個點。

Canvas上使用

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)
結束點：  bezierCurveTo(20,100,200,100,200,20)
           

CSS3上使用

CSS3屬性叫做cubic-bezier，CSS3貝塞爾起點是0,0; 終點是1, 1; 是以隻需要定義剩下的2個點，例如：

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

有專門的頁面讓大家感受CSS3的貝塞爾曲線：

http://cubic-bezier.com/#.25,.1,.25,1

參考：

• 張鑫旭 http://www.zhangxinxu.com/wordpress/?p=3626
• 百度百科 http://baike.baidu.com/item/貝塞爾曲線
• 貝塞爾曲線原理 http://www.cnblogs.com/hnfxs/p/3148483.html
• 有代碼的介紹 https://www.kancloud.cn/trent/imagesharp/100486
• Android移動端應用: http://gavinliu.cn/2015/03/30/Android-Animation-貝塞爾曲線之美/