1

This is what I have at the moment: JsFiddle

But what I'm trying to achieve is something like this: image

I've tried some things but of which none worked out of course..

How would I be able to achieve this? Thanks!

Code:

$('.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);
  });
}
D. Piep
  • 13
  • 5
  • Which brwoser do you use? I have no Problems in FF 50.1 – Kani Dec 20 '16 at 08:47
  • 1
    Try moving the set Line width call to the top of the draw function – mike510a Dec 20 '16 at 08:48
  • @mike510a The problem is when i do that, that the whole circle changes its lineWidth which is how its supposed to work, but im trying to figure out how to have just a piece of the whole line to have a different lineWidth. – D. Piep Dec 20 '16 at 08:52
  • @Kani it's working for me as well, but I'm trying to add a whole different thing to it. – D. Piep Dec 20 '16 at 08:53
  • Are you looking to get your arc start and end at different angles or are you attempting to do the red things on it ? For the former, there is a startAngle and endAngle parameter in arc command, for the later, you can't do it in a single draw call. – Kaiido Dec 20 '16 at 09:11
  • @Kaiido red things at the beginning only, and i know it's not possible to do it in a single call, but im trying to figure out what i CAN do. – D. Piep Dec 20 '16 at 09:16
  • and you want it gibberish like it is ? Then just draw multiple arcs [on the main one](http://stackoverflow.com/questions/839899/how-do-i-calculate-a-point-on-a-circle-s-circumference) at random offsets, if you want only one solid part of the arc having thicker lineWidth, just draw this smaller arc thicker after your main one, but if you want a smooth change, it may be more difficult. – Kaiido Dec 20 '16 at 09:34
  • https://jsfiddle.net/pL1tnqbs/1/ Is it just this ? – Kaiido Dec 20 '16 at 12:20
  • @Kaiido Thank you very much, That's exactly what i was looking for, i've been trying to figure this out for the past couple of hours.. Thanks again! – D. Piep Dec 20 '16 at 13:38

0 Answers0