javascript - 显示递增值

Question

我已经成功制作了一个带有多个圆形进度条的动画，但是现在显示有问题；该值的每个百分比在我的圈子中间递增。我不知道该怎么做。如果你有帮助我做到这一点的想法。我想显示所有这些值。

这是我的代码：

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(() => {

      startAngle += .1;
      percentText.textContent = startAngle + unitValue;

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

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

  }
}

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;
}

#percentText {
  position: absolute;
  top: 50%;
  left: 50;
}

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

标签： javascriptloopscanvasprogress-barjavascript-objects

Answer 1

不完全确定，您要完成什么，但如果您想以固定百分比打印文本，您可以执行以下操作：

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);
                
                var m = context.measureText(percent + "%");
                context.save();
                context.font = "20px Verdana"
                context.fillText(percent + "%", this.posX - this.radius + (this.radius - m.width), this.posY + 10);
                context.restore();
                let arcInterval = setInterval(() => {

                    startAngle += .1;
 
                    /*blue circle*/
                    context.beginPath();
                    context.arc(this.posX, this.posY, this.radius, startAngle, startAngle + unitValue, false);
                    context.strokeStyle = 'blue';
                    context.lineWidth = '20';
                    context.stroke();
                    context.lineCap = 'round';
         
                    if (startAngle >= endAngle) {
                        clearInterval(arcInterval);
                    }
                }, 50);
                
            }
        }

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

            /*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 id="canvas" width="1920" height="1080">

但是，如果您希望百分比随着加载而更新，则必须将文本的打印放在循环中。像这样的东西：

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(() => {

                    startAngle += .1;
 
                    /*blue circle*/
                    context.beginPath();
                    context.arc(this.posX, this.posY, this.radius, startAngle, startAngle + unitValue, false);
                    context.strokeStyle = 'blue';
                    context.lineWidth = '20';
                    context.stroke();
                    context.lineCap = 'round';
                    var percentNow = Math.round(percent * startAngle/endAngle)
                    var m = context.measureText(percentNow + " %");
                    context.save();
                    context.clearRect(this.posX - this.radius + (this.radius - m.width), this.posY - 10, m.width * 3, 20)
                    context.font = "20px Verdana"
                    context.fillText(percentNow + " %", this.posX - this.radius + (this.radius - m.width), this.posY + 10);
                context.restore();
                    if (startAngle >= endAngle) {
                        clearInterval(arcInterval);
                    }
                }, 50);
                
            }
        }

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

            /*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 id="canvas" width="1920" height="1080">