canvas绘制环形渐变进度条

效果图：

html:

js：
var c = document.getElementById(‘canvas’),
canvas = 30,
ctx = c.getContext(‘2d’);

  // 画外面的圆
  ctx.beginPath();
  ctx.arc(71, 71, 65, 0, Math.PI*2);
  ctx.closePath();
  ctx.strokeStyle  = 'rgba(255,255,255,0.1)';
  ctx.stroke();

  // 画里面的圆
  ctx.beginPath();
  ctx.arc(71, 71, 50, 0, Math.PI*2);
  ctx.strokeStyle  = 'rgba(255,255,255,0.1)';
  ctx.stroke();

  drawCricle(ctx, canvas);

  function drawCricle(ctx, percent){
    // 画内填充圆
    ctx.beginPath();
    ctx.arc(71, 71, 49, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fillStyle = '#141733';
    ctx.fill();

    ctx.beginPath();
    ctx.lineWidth=14;
    ctx.lineCap="round";
    ctx.arc(71, 71, 58, Math.PI * 1.5, Math.PI * (1.5 + 2 * percent / 100 ));
    //绘制渐变色
    var g = ctx.createLinearGradient(0,0,180,0);
    g.addColorStop(0, '#ffee99');
    g.addColorStop(1, '#ffb54c');
    ctx.strokeStyle = g;
    ctx.stroke();

    // 填充文字
    ctx.font = "600 24px PingFangSC"; 
    ctx.fillStyle = '#EAEAEB';
    ctx.textAlign = 'center';  
    ctx.textBaseline = 'middle';  
    ctx.moveTo(71, 71);  
    ctx.fillText(canvas + '%', 71, 60);

    ctx.fillStyle = '#C3C7D9';
    ctx.font= "400 16px PingFang SC";
    ctx.fillText("利用率",70,90)
  }

完成