Multiple progress bars using canvas and javascript objects

问题

I'm trying to make a circlular bar progress using html canvas and javascript and i've suceed until I've add a loop with setInterval, since that I'm stuck... I tried to target the problem putting console.log() in all the elements I use to do the loop, but I can't get through why my loop is working in the console but the cirlce doesn't appear. Can anyone help me. I will be very grateful. Thank you in advance. here is my code :

class GreyCircle {
  constructor(x, y, radius) {
    this.posX = x;
    this.posY = y;
    this.radius = radius;
  }

  drawing1(context, startAngle, endAngle) {
    /*grey circle*/
    context.beginPath();
    context.arc(this.posX, this.posY, this.radius, startAngle, endAngle, false);
    context.strokeStyle = '#f3f3f3';
    context.lineWidth = '20';
    context.stroke();
  }
}

class BlueCircle {
  constructor(x, y, r) {
    this.posX = x;
    this.posY = y;
    this.radius = r;
  }

  drawing2(context, percent) {
    let unitValue = (Math.PI - 0.5 * Math.PI) / 25;
    let startAngle = 0;
    let endAngle = startAngle + (percent * unitValue);

    let arcInterval = setInterval(function () {

      startAngle += 0.1;

      /*blue circle*/
      context.beginPath();
      context.arc(this.posX, this.posY, this.radius, startAngle, endAngle, false);
      context.strokeStyle = '#f39c12';
      context.lineWidth = '20';
      context.stroke();
      context.lineCap = 'round';
      console.log('unitValue :' + unitValue);
      console.log('startAngle :' + startAngle);
      console.log('percent : ' + percent)
      console.log('endAngle :' + endAngle);

      if (startAngle >= endAngle) {
        clearInterval(arcInterval);
      }
    }, 500);
  }

}


function setup() {
  let canvas = document.getElementById("canvas");
  let context = canvas.getContext("2d");

  /*draw the grey circles*/
  let greyCircle1 = new GreyCircle(150, 200, 100);
  greyCircle1.drawing1(context, 0, 2 * Math.PI);
  let greyCircle2 = new GreyCircle(400, 200, 100);
  greyCircle2.drawing1(context, 0, 2 * Math.PI);
  let greyCircle3 = new GreyCircle(650, 200, 100);
  greyCircle3.drawing1(context, 0, 2 * Math.PI);

  /*draw the blue circles*/
  let blueCircle1 = new BlueCircle(150, 200, 100);
  blueCircle1.drawing2(context, 80);
  let blueCircle2 = new BlueCircle(400, 200, 100);
  blueCircle2.drawing2(context, 76)
  let blueCircle3 = new BlueCircle(650, 200, 100);
  blueCircle3.drawing2(context, 44);
}


window.onload = function () {
  setup();
}

#canvas{
  position: relative;
  margin: auto;
  display: block;
 }

<section id="skills">
  <div class="load-container">
    <canvas id="canvas" width="800" height="800"></canvas>
    <span id="percent"></span>
  </div>
</section>

来源：https://stackoverflow.com/questions/65449396/multiple-progress-bars-using-canvas-and-javascript-objects

标签

javascript

loops

canvas

progress-bar

javascript-objects