本節書摘來自華章計算機《html5 canvas遊戲開發實戰》一書中的第2章，第2.2節,作者：張路斌著， 更多章節内容可以通路雲栖社群“華章計算機”公衆号檢視。
前面了解了基本圖形的繪制方法，下面我們來看看複雜圖形該如何繪制。
2.2.1 畫曲線
貝塞爾曲線，又稱貝茲曲線或貝濟埃曲線，是應用于二維圖形應用程式的數學曲線。在這裡我們不研究貝塞爾曲線的原理，主要介紹在canvas中如何繪制它。
1 . 二次貝塞爾曲線
二次貝塞爾曲線有一個控制點。在canvas中用quadraticcurveto(cpx,cpy,x,y)函數來繪制二次貝塞爾曲線，cpx、cpy表示控制點的坐标；x、y表示終點坐标。
它的繪制如代碼清單2-11所示。
代碼清單 2-11
繪制效果如圖2-11所示。
圖2-12所示是它的原理圖。
2 . 三次貝塞爾曲線
三次貝塞爾曲線與二次貝塞爾曲線的差別在于，三次貝塞爾曲線有兩個控制點，如代碼清單2-12所示。
代碼清單 2-12
繪制效果如圖2-13所示。
圖2-14所示是它的原理圖。
2.2.2 利用clip在指定區域繪圖
clip函數使用目前路徑作為連續繪制操作的剪切區域。我們可以把它看作一扇窗戶，無論在畫闆上繪制了多大的圖形，最後看到的圖形都隻能由clip這扇窗戶來決定。
為了更容易了解，我們看代碼清單2-13。
代碼清單 2-13
在這裡，我們首先用arc畫了一個圓，然後加入clip函數，最後又畫了一個矩形，最後的效果如圖2-15所示。
可以看到，雖然我們畫了一個矩形，但是最後出現的圖形裡并沒有矩形。這是因為首先繪制的是一個圓，然後clip函數将目前的這個圓作為繪制操作的區域，是以之後畫出的圖形隻能顯示在這個區域内。也就是說，即使一間房子再大，可是它的窗戶很小，最後我們透過這扇窗戶能夠看到的空間也就隻有窗戶這麼大。是以代碼清單中畫出的大矩形隻能顯示出圖2-15所示的效果了。
2.2.3 繪制自定義圖形
所謂自定義圖形，是指将上面講到的各種方法結合起來，實作一些特殊的圖形。比如代碼清單2-14。
代碼清單 2-14
上面代碼繪制的自定義圖形如圖2-16所示。