HTML5 Canvas轻松玩-----圆周运动的妙用：Loading加载动画~~

乾玄的博客

<div id="cnblogs_post_body">说到Loading加载动画，大家再熟悉不过了，目前主要有三种形式：
1.条状加载进度条动画。

2.圆形或者环形加载动画。

3.个性化的加载动画。


通过这三种方式，可以变化出 各种好看的加载动画，特别是第三种方式。至于如何创建这些加载动画，目前主要可以通过静态图片+js，动态图片，flash和Silverlight等浏览器插件来完成。

    今天不玩图片，不玩flash，也不玩silverlight，正如本文题目所说，没错，今天将要玩弄下html5的canvas，通过canvas结合js来制作加载动画，而今天的加载动画主要通过圆周运动来完成，所以你也可以猜到，今天将要制作的是圆形环形类别的加载动画，至于其它类别，以后再说，开始吧。

     通过观察，可以发现，圆形加载动画，就是绕着圆心做圆周运动的动画，一种形式是：
     一个圆环，然后在圆环上有不同与圆环颜色的部分在圆环上做圆周运动，当然也可以没有圆环：  
     
那么，我们该如何通过html5+js实现这种效果呢？
首先，我们先画一个圆环作为底。然后，我们再画不同于底色的那条绕着圆心旋转的“光带”，问题是我们该如何画这条“光带”，本文将通过画一系列的圆来模拟这条“光带”，当然也有其它方式，比如画圆弧。
定义“光带”需要用到两个数组：一个是这些圆在圆环上的位置，这里有点特殊的是位置数组不是[x,y]这样的坐标点集合，而是一个角度集合，原因是它的位置实际上是和在圆周上的相对角度有关，这也和圆的参数方程有关。
另一个是透明度数组，因为我们看到“光带”的颜色是渐变为透明的。
var angle = [10,20,30,40,50,60,70,80,90,100];