html5 canvas繪圖-貝塞爾曲線

貝塞爾曲線（ezier curve）最遲是由法國實體學家與數學家paul de Casteljau發明的。它的廣泛運用則要歸功于法國工程師皮埃爾

貝塞爾

貝塞爾曲線期初被用在汽車車身的設計上。現在則多用于計算機圖形系統中。例如Adobe

Illustrator/Apple的Cocoa架構以及在Html5的canvas。

貝塞爾曲線分為兩種：平方（quadratic）貝塞爾曲線及立方（cubic）貝塞爾曲線。平方貝塞爾曲線是一種二次曲線（second degree

curve），意思就是說，它們是由三個點來定義的：兩個錨點（anchor point）及一個控制點（control

point）。而立方貝塞爾曲線則是一種三次曲線（third-degree curve），是由四個點來控制的：兩個錨點及兩個控制點。

canvas 支援平方及立方貝塞爾曲線。在接下來的數個小節中，我們将深入講解如何使用Canvas來生成這些曲線。

二次方貝塞爾曲線:

二次方貝塞爾曲線是那種隻向一個方向彎曲的簡單曲線。下圖程式展示的使用三條二次方貝塞爾曲線所拼合而成的一個複選框标記。

html代碼：

example.js代碼：

你可以通過quadraticCurveTo()方法來繪制二次方貝塞爾曲線，改函數接受四個參數，分别表示兩個點的X與Y坐标。第一個是曲線的控制點，用于決定該曲線的形狀。第二個點是錨點。quadraticCurveTo()方法所繪制的貝塞爾曲線，會将錨點與目前路徑中的最後一個點連接配接起來。

二次方貝塞爾曲線的用途很多。舉例來說，下圖的應用程式使用二次方貝塞爾曲線來繪制箭頭形狀的三個尖端。該應用程式還将每條曲線的控制點與錨點也标注了出來。

使用貝塞爾曲線累繪制圓角：白色的點表示控制點，深色的點表示錨點

該圖所示應用程式的代碼如下清單：