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); }