本節書摘來自異步社群《html5 canvas開發詳解》一書中的第2章，第2.5節,作者： 【美】steve fulton , jeff fulton 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
接下來深入探讨一下其他繪制路徑的方法，包括弧線和曲線，以組合成複雜的圖像。
2.5.1 弧線
有4種函數可以繪制弧線和曲線。弧線可以是一個整圓，也可以是圓的任何一部分。
1．context.arc()
x和y定義圓心的位置，radius定義弧線的半徑。startangle和endangle使用弧度值，而不是角度值。anticlockwise可以是true或false這兩個值，用于定義弧線的方向。例如，繪制一個圓心在（100，100），半徑為20的圓，如圖2-4所示，可以使用下面這段drawscreen()代碼。
context.arc(100, 100, 20, (math.pi/180)0, (math.pi/180)360, false);
例2-4顯示建立一個簡單圓形所必須的代碼。
https://yqfile.alicdn.com/05848324b99620fa5a1a65477400470e8e50d77c.png" >
圖檔 16
圖2-4 圓
注意，這裡應将起始角度（0）和結束角度（360）乘以（math.pi/180）來将其轉換為弧度。使用0和360，可以建立一個完整的圓形。
如果不以0到360作為起止點，則可以繪制出一段圓弧。下面這段drawscreen()代碼将按順時針方向畫四分之一個圓，如圖2-5所示。
如果要畫0～90以外的部分，如圖2-6所示，可以将anticlockwise值設定為true。
2．context.arcto()
隻有最新的一些浏覽器支援arcto方法，這個函數以給定的半徑繪制一條弧線，圓弧的起點與目前路徑的位置到（x1，y1）點的直線相切，圓弧的終點與（x1，y1）點到（x2，y2）的直線相切。
context.arcto方法要求目前路徑至少有一個子路徑。那麼，如果從（0，0）到（100，200）畫一條直線，然後建立一條小弧線，這看起來會有點像一個鋼絲衣架（沒有更好的比喻了），如圖2-7所示。
2.5.2 貝塞爾曲線
貝塞爾曲線要比弧線靈活得多，它有立方和平方兩種形式。
在二維空間中，貝塞爾曲線通過“起點”、“終點”以及兩個決定曲線走向的“控制”點定義完成。一個普通的立方貝塞爾曲線使用兩個點，平方貝塞爾曲線使用一個點。平方貝塞爾曲線是最簡單的曲線，如圖2-8所示，隻需要終點以及一個控制點即可完成繪制。
這條曲線從（0，0）開始，到（0，50）結束，用來建立弧線的點位于（100，25），這個點大緻上是圓弧的圓心。控制點的x值100把弧線拉伸成一個細長的曲線。
立方貝塞爾曲線具有兩個控制點，是以帶來了更多的選擇，進而能夠很容易地繪制出經典的“s”形曲線（如圖2-9所示）。
https://yqfile.alicdn.com/00d1afb2894b2a83fcaf870dd39aa9f474c18aa8.png" >
2.5.3 canvas裁切區域
結合save()函數和restore()函數，canvas裁切區域可以限制路徑及其子路徑的繪制區域。首先通過rect()函數設定一個用來繪圖的矩形區域，然後調用clip()函數把用rect()函數定義的矩形設定為裁切區域。現在，無論在目前上下文繪制什麼内容，它隻顯示裁切區域以内的部分。這也可以了解成是繪圖操作的一種蒙版。例2-5顯示如何操作，裁切結果如圖2-10所示。
例2-5首先在畫布上畫了一個200×200的黑色矩形，然後将canvas裁切區域設定為rect(0,0,50,50)，clip()函數按照這些參數對畫布進行裁切設定，所畫的紅色圓弧形隻能看到在這個矩形以内的部分，最後将裁切區域調整回rect(0,0,500,500)并畫一個新的藍色圓弧，此時整個圓都能夠看到。
提示：
也可以将其他canvas方法配合裁切區域使用，最常見的的是arc()函數。
這可以建立一個圓形的裁切區域，而不是矩形的裁切區域。