直接上代碼

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';
//調(diào)用畫圓環(huán)
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：圓環(huán)的‘厚度’
               startcolor:漸變的起始色
               endcolor：漸變的結(jié)束色            
             */
            var _w =  w;
            var _h = h;
            var _b = b;

            //canvas 標(biāo)簽
            var canvas = document.getElementById(id);
            var context = canvas.getContext('2d');
            //將繪圖區(qū)域清空，如果是第一次在這個畫布上畫圖，畫布上沒有東西就不需要這步了
            context.clearRect(0,0,_w,_h);
            //開始畫一個灰色的圓
            context.beginPath();
            //坐標(biāo)移動到圓心
            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();
            //灰色的圓畫完

            /*//畫進(jìn)度
            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();*/

            // 畫內(nèi)部空白
            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(); */
                // 與畫實(shí)心圓的區(qū)別,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);
        */
    }

效果

圓環(huán)效果圖