1. #cvs {
    2.     width: 200px;
    3.     height: 200px;
    4. }
    1.  <canvas id="cvs" width="400" height="400">您的浏览器不支持canvas标签。 </canvas>
    1. /** 绘制圆形进度条
    2.  * @description: 
    3.  * @param {*} drawing_elem 绘制对象
    4.  * @param {*} percent 绘制圆环百分比, 范围[0, 100]
    5.  * @param {*} forecolor 绘制圆环的前景色，颜色代码
    6.  * @param {*} bgcolor 绘制圆环的背景色，颜色代码
    7.  * @return {*}
    8.  */
    9. function drawMain(drawing_elem, percent, forecolor, bgcolor) {
    11.     var context = drawing_elem.getContext("2d");
    12.     var center_x = drawing_elem.width / 2;
    13.     var center_y = drawing_elem.height / 2;
    14.     var rad = Math.PI * 2 / 100;
    15.     var speed = 0;
    17.     // 绘制背景圆圈
    18.     function backgroundCircle() {
    19.         context.save();
    20.         context.beginPath();
    21.         context.lineWidth = 30; //设置线宽
    22.         var radius = center_x - context.lineWidth;
    23.         context.lineCap = "round";
    24.         context.strokeStyle = bgcolor;
    25.         context.arc(center_x, center_y, radius, 0, Math.PI * 2, false);
    26.         context.stroke();
    27.         context.closePath();
    28.         context.restore();
    29.     }
    31.     //绘制运动圆环
    32.     function foregroundCircle(n) {
    33.         context.save();
    34.         context.strokeStyle = forecolor;
    35.         context.lineWidth = 30;
    36.         context.lineCap = "round";
    37.         var radius = center_x - context.lineWidth;
    38.         context.beginPath();
    39.         context.arc(center_x, center_y, radius, -Math.PI / 2, -Math.PI / 2 + n * rad, false); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
    40.         context.stroke();
    41.         context.closePath();
    42.         context.restore();
    43.     }
    45.     //绘制文字
    46.     function text(n) {
    47.         context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
    48.         context.fillStyle = "gray";
    49.         var font_size = 50;
    50.         context.font = font_size + "px Helvetica";
    51.         var text_width = context.measureText(n.toFixed(0) + "%").width;
    52.         context.fillText(n.toFixed(0) + "%", center_x - text_width / 2, (center_y + font_size / 2) + 20);
    53.         context.restore();
    54.     }
    56.     //执行动画
    57.     (function drawFrame() {
    58.         window.requestAnimationFrame(drawFrame);
    59.         context.clearRect(0, 0, drawing_elem.width, drawing_elem.height);
    60.         backgroundCircle();
    61.         text(speed);
    62.         foregroundCircle(speed);
    63.         if (speed >= percent) return;
    64.         speed += 1;
    65.     }());
    66. }
    69. drawMain(document.getElementById("cvs"), 100, "#07c160", "#BDBDBD")