绘制canvas进度条

效果图：

html:

<div class="circle " data-d="90">
   <canvas width="270" height="270" id="canvas"></canvas>
 </div>

css:

body{
    background: #4EC2EA;
}
.circle {
    width: 230px;
    height: 230px;
    margin: 0 auto;
    position: relative;
    line-height: 230px;
}

js:

//接入方式-标题
    var canvas = document.getElementById(‘canvas‘),
        context = canvas.getContext(‘2d‘),
        centerX = canvas.width/2,  //Canvas中心点x轴坐标
        centerY = canvas.height/2,  //Canvas中心点y轴坐标
        rad = Math.PI*2/100, //将360度分成100份，那么每一份就是rad度
        speed = 0.1; //加载的快慢

var timer = setInterval(function () {
                speed += 0.8;
                if(speed > 90){
                    clearInterval(timer);
                    return false;
                }
                context.clearRect(0, 0, canvas.width, canvas.height);
                blueCircle();
                text(speed);
                whiteCircle(speed);
            },10);

//绘制白色外圈
    function whiteCircle(n){
        context.save();
        context.strokeStyle = "#fff"; //设置描边样式
        context.lineWidth = 39; //设置线宽
        context.beginPath(); //路径开始
        context.arc(centerX, centerY, 114 , -Math.PI/2, -Math.PI/2 - n*rad, true); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
        context.stroke(); //绘制
        context.closePath(); //路径结束
        context.restore();
    }
    //绘制蓝色内圈
    function blueCircle(){
        context.save();
        context.fillStyle="#4EC2EA";
        context.lineWidth=39;
        context.strokeStyle = "#81D5F1";
        context.beginPath();
        context.arc(centerX,centerY,114,0,2*Math.PI,false);//顺时针
        context.fill();
        context.stroke();
        context.restore();
    }
    //百分比文字绘制
    function text(n){
        context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
        context.fillStyle = "#fff"; //设置描边样式
        // context.font = "54px Microsoft Yahei"; //设置字体大小和字体
        context.font = "62px arial"; //设置字体大小和字体
        //绘制字体，并且指定位置
        context.fillText(n.toFixed(0)+"%", centerX-53, centerY+20);
        context.restore();
    }