JS实现可动的canvas环形进度条

话不多说，直接先看效果图：

canvas的属性、方法和一些基础的js API

属性和方法	描述
getContext()	返回一个用于在画布上绘图的环境
strokeStyle	画笔（绘制图形）颜色或者样式的属性
lineWidth	设置线段厚度的属性
save()	保存canvas全部状态的方法（入栈）
beginPath()	创建一个新的路径的方法
arc(原点x,原点y,半径,起始角度,结束角度,默认false顺时针)	绘制圆弧路径的方法
stroke()	绘制路径的方法
closePath()	闭合绘制路径
restore()	恢复到最近的保存状态的方法（出栈）
fillStyle	颜色和样式的属性
font	当前字体样式的属性
toFixed(num)	把Number四舍五入为指定小数位数的数字

创建一个canvas

<canvas id="mycanvas" width="200px" height="200px"></canvas>  

JS代码：

var mycanvas = document.getElementById('mycanvas');
var ctx = mycanvas.getContext('2d');
//找到画布的中心点
var canvasX = mycanvas.width / 2;
var canvasY = mycanvas.height / 2;
//进度条是100%，所以要把一圈360度分成100份
var progress = Math.PI * 2 / 100;
//指定初始加载步长
var steps = 0;
// 进度
var currPrg = 75;

//绘制形状函数,传入画布对象和每次都会改变的步长
function DrawShape(ctx, steps) {
    //画进度环
    ctx.strokeStyle = '#dddddd';
    ctx.lineWidth = 3;
    ctx.save();
    ctx.beginPath();
    ctx.arc(canvasX, canvasY, 22, 0, Math.PI * 2, false)
    ctx.stroke();
    ctx.closePath();
    ctx.restore();

    ctx.strokeStyle = "#234DAF";
    ctx.lineWidth = 3;
    ctx.save();
    ctx.beginPath();
    ctx.arc(canvasX, canvasY, 22, -Math.PI / 2, -Math.PI / 2 + steps * progress, false);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
    //绘制字体并指定位置
    ctx.fillStyle = "#234DAF"; //可改
    ctx.font = "bold 12px Arial"; //可改
    ctx.save();
    // canvasX-30, canvasY+10  中的加减的数值可改
    if (steps.toFixed(0).length == 1) {
        ctx.fillText(steps.toFixed(0) + '%', canvasX - 8, canvasY + 6);
    } else {
        ctx.fillText(steps.toFixed(0) + '%', canvasX - 10, canvasY + 6);
    }
    ctx.restore();
}

//初始调用动画函数
animate();
//动画函数
function animate() {
    //执行平滑动画
    window.requestAnimationFrame(function () {
        //判断步子最终走多远的边界值，此值可以改
        if (steps < currPrg) {
            //该函数在边界内可以调用
            animate();
        }
    });
    //清空绘制内容
    ctx.clearRect(0, 0, mycanvas.width, mycanvas.height);
    //调用绘制形状函数，传入参数绘制对象，环形进度步长
    DrawShape(ctx, steps);
    //每次增加的步长，数值越大步子越大跑的越快，数值越小走的越慢
    steps += 0.5;//可改
}