canvas的簡單圓形進度條

 window.onload = function(){
			function arc(canvas,number){
				var canvas = document.getElementById(canvas),  //獲取canvas元素
                context = canvas.getContext('2d'),  //獲取畫圖環境，指明為2d
                centerX = canvas.width/2,   //Canvas中心點x軸座標
                centerY = canvas.height/2,  //Canvas中心點y軸座標
                rad = Math.PI*2/100, //將360度分成100份，那麼每一份就是rad度
                speed = 0.1; //載入的快慢就靠它了 
            //繪製藍色外圈
				function blueCircle(n){
					whiteCircle();
					context.save();
					context.strokeStyle = "#44C7F4"; //設定描邊樣式
					context.lineWidth = 10; //設定線寬
					context.beginPath(); //路徑開始
					context.arc(centerX, centerY, 100 , -Math.PI/2, -Math.PI/2 +n*rad, false); //用於繪製圓弧context.arc(x座標，y座標，半徑，起始角度，終止角度，順時針/逆時針)
					context.stroke(); //繪製
					context.closePath(); //路徑結束
					context.restore();
				}
				//繪製白色外圈
				function whiteCircle(){
					context.save();
					context.beginPath();
					context.strokeStyle = "white";
					context.lineWidth = 10; //設定線寬
					context.arc(centerX, centerY, 100 , 0, Math.PI*2, false);
					context.stroke();
					context.closePath();
					context.restore();
				}  
				//百分比文字繪製
				function text(n){
					context.save(); //save和restore可以保證樣式屬性只運用於該段canvas元素
					context.fillStyle="#44C7F4";
					context.font = "40px Arial"; //設定字型大小和字型
					//繪製字型，並且指定位置
					context.fillText(n.toFixed(0)+"%", centerX-25, centerY+15);
					context.stroke(); //執行繪製
					context.restore();
				} 
				//動畫迴圈
				
				function drawFrame(){
					window.requestAnimationFrame(drawFrame, canvas);
					context.clearRect(0, 0, canvas.width, canvas.height);
					whiteCircle();
					text(speed);
					blueCircle(speed);
					if(parseInt(speed) == number) return;
					speed += 1;
				}
				drawFrame()
			}
         arc("canvas",50);   
        }