canvas百分比加載動畫

window.onload = function(){
    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 = 1; //加載的快慢就靠它了
    //繪製藍色外圈
    function blueCircle(n){
        context.save();
        context.strokeStyle = "#d0b171"; //設置描邊樣式
        context.lineWidth = 20; //設置線寬
        context.beginPath(); //路徑開始
        context.arc(centerX, centerY, 90 , -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.arc(centerX, centerY, 100 ,0, Math.PI*2, false);
        context.stroke();
        context.closePath();
        context.restore();
    }
    //百分比文字繪製
    function text(n){
        context.save(); //save和restore能夠保證樣式屬性只運用於該段canvas元素
        // context.strokeStyle = "#d0b171"; //設置描邊樣式
        context.fillStyle = '#d0b171';
        context.font = "bold 30vw '微軟雅黑'"; //設置字體大小和字體
        // context.paint.setStyle(Style.FILL);
        //繪製字體，而且指定位置
        // context.strokeText(n.toFixed(0)+"", centerX-50, centerY+20);
        context.fillText(n.toFixed(0)+"",centerX-50,centerY+20,100);
        context.stroke(); //執行繪製
        context.restore();
    }
    //動畫循環
    (function drawFrame(){
        window.requestAnimationFrame(drawFrame, canvas);
        context.clearRect(0, 0, canvas.width, canvas.height);
        whiteCircle();
        text(speed);
        blueCircle(speed);
        if(speed >= 100){
            speed = 100;
            // canvas.remove();
        }else{
            speed += 1;
        }
    }());
}