canvas實現動態圓

function cirleShow(num) {
      var canvas = $api.byId('canvas');    //畫布的位置，div
      context = canvas.getContext('2d');
      centerX = canvas.width/2;            //圓的位置
      centerY = canvas.height/2;
      rad = Math.PI*2/100;
      speed = 0.1;
      function yellowCircle(n) {      //黃色圓的設置
        context.save();
        context.strokeStyle = "#fedb43";     
        context.lineWidth = 10;
        context.beginPath();
        context.arc(centerX,centerY,54,-Math.PI/2,-Math.PI/2+n*rad,false);
        context.stroke();
        context.closePath();
        context.restore();
      }
      function balckCircle() {        //黑色圓的設置
        context.save();
        context.beginPath();
        context.strokeStyle = "#788976";
        context.lineWidth = 2;
        context.arc(centerX,centerY,54,0,Math.PI*2,false);
        context.stroke();
        context.closePath();
        context.restore();
      }
      function text(n) {     //進度字體設置
        context.save();
        // context.strokeStyle = "#313131";
        context.font = "bold 39px 蘋方黑體";
        context.fillStyle="#313131";
        if(n<10){
          context.fillText(n.toFixed(0),centerX-13,centerY+8);
        }
        if(n>99){
          context.fillText(n.toFixed(0),centerX-31,centerY+8);
        }
        if(n>=10 && n<=99){
          context.fillText(n.toFixed(0),centerX-22,centerY+8);
        }
        context.stroke();
        context.restore();
      }

      (function drawFrame() {
        requestId = window.requestAnimationFrame(drawFrame,canvas);
        context.clearRect(0,0,canvas.width,canvas.height);
        balckCircle();
        text(speed);
        yellowCircle(speed);
        if(speed>=num) {
          speed = 0;
          if(requestId){
            window.cancelAnimationFrame(requestId);                //停止動畫
            requestId = undefined;
          }
        }
        if(speed<3||(speed>=num-3&&speed<num)){
          speed += 0.1;
        }
        else {
          speed += 1;
        }
      }());

    }