Canvas之画多色圆环动画

一,说明

使用HTML画出可动画的多色圆环.效果图如下:

二,代码片段:(完整的代码地址在文章最下面)

<canvas id="canvas_a" width="800" height="800" ></canvas>

<script type="text/javascript">
		
			
			window.onload = function(){
            var canvas_a = document.getElementById('canvas_a');  //获取canvas元素
                context_a = canvas_a.getContext('2d');  //获取画图环境，指明为2d
                
            var canvas_b=document.getElementById('canvas_b');
            		context_b=canvas_b.getContext('2d');
            
                centerX_a = canvas_a.width/2;   //Canvas中心点x轴坐标
                centerY_a = canvas_a.height/2;  //Canvas中心点y轴坐标
                rad = Math.PI*2/1000; //将360度分成1000份，那么每一份就是rad度
                speed_a = 0; //加载的快慢就靠它了 
                speed2_a=0;
                speed3_a=0;
                speed4_a=0;
                max_a=503;
                
                was_a=162;
                will_a=320;
                delay_a=21;
                cancel_a=0;
                
                speed_b = 0; //加载的快慢就靠它了 
                speed2_b=0;
                speed3_b=0;
                speed4_b=0;
                max_b=503
                
                was_b=182;
                will_b=300;
                delay_b=16;
                cancel_b=5;
                centerX_b = canvas_b.width/2;   //Canvas_b中心点x轴坐标
                centerY_b = canvas_b.height/2;
                text_a="出港航班";
                text_b="进港航班";
                
                canvas_a.οnclick=function(){
                	window.open('onAndOutFlightHour.html');
                }
                canvas_b.οnclick=function(){
                	window.open('onAndOutFlightHour.html');
                }
                var errorTd=document.getElementById("errorTd");
				
                	errorTd.οnclick=function(){
                		window.open('flightErrorAnalyse.html');
                	}
                
            //绘制外圈
            function wasCircle(n,ctx,centerx,centery){
            	if(n<=0){
            		retur