直接上代码

html

<div style="width:150px;height:150px;text-align:center;position:relative;">
    <canvas id="id1" width='140px' height='140px'></canvas>
    <h3 class="t_num" id="id1-t" style="position:absolute;top:60px;left:0;width:100%;text-align:center;z-index:11;color:#333;"></h3>
  </div>

js:

var idL = 140;
var suduval = 500;
var sudusum = 600;
_id1 = document.getElementById("id1");
_id1.style.width =  idL+'px';
_id1.style.height =  idL+'px';
//调用画圆环
drwaProcess('id1',suduval,sudusum,idL,idL,10,"rgb(165,215,174)","rgb(248,231,143)");

function drwaProcess(id,val,sum,w,h,b,startcolor,endcolor){
            /* id:元素
               val :值
               sum：总值
               w，h：宽高
               b：圆环的‘厚度’
               startcolor:渐变的起始色
               endcolor：渐变的结束色            
             */
            var _w =  w;
            var _h = h;
            var _b = b;

            //canvas 标签
            var canvas = document.getElementById(id);
            var context = canvas.getContext('2d');
            //将绘图区域清空，如果是第一次在这个画布上画图，画布上没有东西就不需要这步了
            context.clearRect(0,0,_w,_h);
            //开始画一个灰色的圆
            context.beginPath();
            //坐标移动到圆心
            context.moveTo(_w/2,_h/2);
            context.arc(_w/2,_h/2,_w/2,0,Math.PI*2,false);
            context.closePath();
            //填充颜色
            context.fillStyle = "#ddd";
            context.fill();
            //灰色的圆画完

            /*//画进度
            context.beginPath();
            context.moveTo(_w/2,_h/2);
            context.arc(_w/2,_h/2,_w/2,0,Math.PI*2*val/sum,false);
            context.closePath();
            context.fillStyle="#e74c3c";
            context.fill();*/

            // 画内部空白
            context.beginPath();
            context.moveTo(_w/2, _h/2);
            context.arc(_w/2, _h/2, _w/2-_b, 0, Math.PI * 2, true);
            context.closePath();
            context.fillStyle = 'rgba(255,255,255,1)';
            context.fill();

            // 画一条线
            context.beginPath();
            context.arc(_w/2, _h/2, _w/2-_b+4, 0, Math.PI * 2*val/sum, false);
            /*context.closePath(); */
                // 与画实心圆的区别,fill是填充,stroke是画线
            var gradient=context.createLinearGradient(0,0,170,0);
            /*gradient.addColorStop("0","magenta");*/
            gradient.addColorStop("0.5",startcolor);
            gradient.addColorStop("1.0",endcolor);
            context.strokeStyle = gradient;
            /*context.strokeStyle = '#f60';  */
            context.lineWidth=_b;
            context.stroke();

              //$(id+'-t').html(val);
              console.log(val);
              //show_num(id+'-t',val);
                //在中间写字
        /*    context.font = "bold 18pt Arial";
            context.fillStyle = '#e74c3c';
            context.textAlign = 'center';
            context.textBaseline = 'middle';
            context.moveTo(_w/2, _h/2);
            context.fillText(val, _w/2, _h/2);
        */
    }

效果

圆环效果图