說到Loading加載動畫，大家再熟悉不過了，目前主要有三種形式：
1.條狀加載進度條動畫。
2.圓形或者環形加載動畫。
3.個性化的加載動畫。
通過這三種方式，可以變化出 各種好看的加載動畫，特別是第三種方式。至於如何創建這些加載動畫，目前主要可以通過靜態圖片+js，動態圖片，flash和Silverlight等瀏覽器插件來完成。
今天不玩圖片，不玩flash，也不玩silverlight，正如本文題目所說，沒錯，今天將要玩弄下html5的canvas，通過canvas結合js來制作加載動畫，而今天的加載動畫主要通過圓周運動來完成，所以你也可以猜到，今天將要制作的是圓形環形類別的加載動畫，至於其它類別，以后再說，開始吧。
通過觀察，可以發現，圓形加載動畫，就是繞着圓心做圓周運動的動畫，一種形式是：
一個圓環，然后在圓環上有不同與圓環顏色的部分在圓環上做圓周運動，當然也可以沒有圓環：
那么，我們該如何通過html5+js實現這種效果呢？
首先，我們先畫一個圓環作為底。然后，我們再畫不同於底色的那條繞着圓心旋轉的“光帶”，問題是我們該如何畫這條“光帶”，本文將通過畫一系列的圓來模擬這條“光帶”，當然也有其它方式，比如畫圓弧。
定義“光帶”需要用到兩個數組：一個是這些圓在圓環上的位置，這里有點特殊的是位置數組不是[x,y]這樣的坐標點集合，而是一個角度集合，原因是它的位置實際上是和在圓周上的相對角度有關，這也和圓的參數方程有關。
另一個是透明度數組，因為我們看到“光帶”的顏色是漸變為透明的。
var alpha = [0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1];
如上所示，我們定義了10個圓在不同的位置和不同的透明度來模擬“光帶”。
接下來來看今天的重點，就是圓的參數方程：
通過該方程，我們可以找到角度和圓周（圓環）上的坐標點的關系，只要改變角度大小，使得角度從0-360度循環改變，那么圓上的坐標點也將隨着圓周改變位置，但是始終在圓周上。於是我們可以利用這些坐標點畫圓環上的小圓來模擬“光帶”。至於參數方程的證明，我這里就不說了，畢竟這里不是初中數學課嘛。過程就這么簡單，接下去就是工具的問題了，我們今天的工具是html5+js。直接上代碼：
通過代碼可以看到，其實過程就是模擬實現圓周運動，這里為了偷懶，不想每次都重復寫獲得畫布上下文等操作，我使用了之前封裝的一個畫圖小工具來進行canvas畫圖，而沒有使用html5直接的畫圖api。
另一種效果是沒有“光帶”，“光帶” 被一系列圓周運動的大小不同的圓代替，我們要做的只是修改上述代碼，把圓與圓之間的距離拉大就行了，然后再定義每個圓不同的大小，最后代碼如下：