相同的画布弧线宽度不同

Question

这就是我现在所拥有的：JsFiddle

但我想要达到的目标是这样的：image

我已经尝试过一些东西，但当然没有任何效果......

我怎样才能做到这一点？谢谢！

代码：

$('.canvas').each(function(i, item) {
  drawFigure($(this).children().attr('id'), $(this).children().attr('class'));
});

function drawFigure(id, className) {
  $('#' + id).each(function(i, item) {
    var canvas = document.getElementById(id);
    var context = canvas.getContext('2d');
    var x = canvas.width / 2;
    var y = canvas.height / 2;
    var radius = 100;
    var endPercent = 210;
    var curPerc = 0;
    var circ = Math.PI * 1;
    var startPoint = -80;
    var rotate = false;

    if (className == "circle") {
      endPercent = 210;
      startPoint = -80;
    } else if (className == "halfCircle") {
      endPercent = 105;
      startPoint = 110;
    } else if (className == "meter") {
      endPercent = 50;
      startPoint = 40;
    } else if (className == "test") {
      context.lineWidth = 40;
    }

    function animate(current) {
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.beginPath();
      context.arc(x, y, radius, -(startPoint), ((circ) * current) - startPoint, rotate);
      context.stroke();
      context.lineCap = "round";

      // context.beginPath();
      // context.arc(60, 50, 20, -38, 2, true);
      // context.stroke();
      // context.lineWidth = 10;

      curPerc++;

      if (curPerc < 9) {
        context.lineWidth = 10;
      } else {
        context.lineWidth = 1;
      }

      if (curPerc < endPercent) {
        requestAnimationFrame(function() {
          animate(curPerc / 100)
        });
      }
    }
    animate(50);
  });
}