繪製標準圓弧
在開始之前，我們優化一下我們的作圖環境。靈感來自於上節課的紋理，如果不喜歡這個背景，我在images目錄下還提供了其他的背景圖，供大家選擇。另外把所有的樣式表都寫在了
下。j**ascript code複製內容到剪貼簿
執行結果：
之所以要繪製乙個空白的矩形填滿畫布，是因為我們之前說過，canvas是透明的，如果不設定背景色，那麼它就會被我設定的
紋理所覆蓋，想要使其擁有背景色（白色），只有繪製矩形覆蓋canvas這乙個方法。
怎麼樣，是不是非常的酷？
使用arc()繪製圓弧
arc()的使用方法如下：
j**ascript code複製內容到剪貼簿
前面三個引數，分別是圓心座標與圓半徑。startangle、endangle使用的是弧度值，不是角度值。弧度的規定是絕對的，如下圖。
anticlockwise表示繪製的方法，是順時針還是逆時針繪製。它傳入布林值，true表示逆時針繪製，false表示順時針繪製，預設值為false。
弧度的規定是絕對的，什麼意思呢？就是指你要繪製什麼樣的圓弧，弧度直接按上面的那個標準填就行了。
比如你繪製 0.5pi ~ 1pi 的圓弧，如果順時針畫，就只是左下角那1/4個圓弧；如果逆時針畫，就是與之互補的右上角的3/4圓弧。此處自己嘗試，不再舉例。
使用切點繪製圓弧
arcto()介紹:
arcto()方法接收5個引數，分別是兩個切點的座標和圓弧半徑。這個方法是依據切線畫弧線，即由兩個切線確定一條弧線。
具體如下。
j**ascript code複製內容到剪貼簿
這個函式以給定的半徑繪製一條弧線，圓弧的起點與當前路徑的位置到(x1, y1)點的直線相切，圓弧的終點與(x1, y1)點到(x2, y2)的直線相切。因此其通常配合moveto()或lineto()使用。其能力是可以被更為簡單的arc()替代的，其複雜就複雜在繪製方法上使用了切點。
使用切點繪製弧線:
下面的案例我把切線也繪製出來了，看的更清楚一些。
j**ascript code複製內容到剪貼簿
執行結果：
這個案例也很好說明了arcto()的各個關鍵點的作用。為了更清楚的解釋，我再標註乙個分析圖。
這裡注意一下，arcto()繪製的起點是(x0, y0)，但(x0, y0)不一定是圓弧的切點。真正的arcto()函式只傳入(x1, y1)和(x2, y2)。其中(x1, y1)稱為控制點，(x2, y2)是圓弧終點的切點，它不一定在圓弧上。但(x0, y0)一定在圓弧上。
有一點點繞，下面我們改變drawarcto()函式的引數來試驗一下。
(x2, y2)不一定在弧線上：
j**ascript code複製內容到剪貼簿
(x0, y0)一定在弧線上：
j**ascript code複製內容到剪貼簿
挺有意思的，它為了經過(x0, y0)直接將切點和(x0, y0)連線起來形成線段。好執著的弧線……
本文標題: 使用html5 canvas api繪製弧線的教程
本文位址:
HTML5 localStorage使用教程
在客戶端儲存資料，html5 提供了兩種在客戶端儲存資料的新方法 localstorage 沒有時間限制的資料儲存 sessionstorage 針對乙個 session 的資料儲存 之前，這些都是由 cookie 完成的。但是 cookie 不適合大量資料的儲存，因為它們由每個對伺服器的請求來傳遞...
HTML5如何使用SVG
幾個svg小例子 我們來看一下第三個分享圖示的 不了解svg的同學現在一定一臉問號，就跟我第一次見他們一樣，別著急，我們從基礎看起。svg 是一種基於 xml 語法的影象格式，全稱是可縮放向量圖 scalable vector graphics 其他影象格式都是基於畫素處理的，svg 則是屬於對影象...
html5介紹,什麼是html5,html5新特性
html5 將成為 html xhtml 以及 html dom 的新標準。html 的上乙個版本誕生於 1999 年。自從那以後，web 世界已經經歷了巨變。html5 仍處於完善之中。然而，大部分現代瀏覽器已經具備了某些 html5 支援。html5 是 w3c 與 whatwg 合作的結果。編...