无旋转效果的环形进度条无法正常显示问题求助

要让环形进度条直接显示目标进度（而非逐步动画过渡），只需修改JS中的arcMove()函数，移除定时器循环逻辑，直接使用目标角度值完成绘制即可，具体修改如下：

修改核心点 #

• 移除setInterval定时器，无需逐帧递增角度
• 直接将degrees赋值为目标角度result
• 一次性完成进度条绘制与中间数值更新

修改后的完整代码 #

JavaScript 代码 #

window.onload = function() {
  var can = document.getElementById('canvas'),
      spanProcent = document.getElementById('procent'),
      c = can.getContext('2d');

  var posX = can.width / 2,
      posY = can.height / 2,
      procent = 0,
      oneProcent = 360 / 100,
      result = oneProcent * 64; // 目标进度为64%

  c.lineCap = 'round';
  arcMove();

  function arcMove(){
    var deegres = result; // 直接设置为目标角度
    c.clearRect( 0, 0, can.width, can.height );
    procent = deegres / oneProcent;

    spanProcent.innerHTML = procent.toFixed();

    // 绘制灰色背景圆环
    c.beginPath();
    c.arc( posX, posY, 70, (Math.PI/180) * 270, (Math.PI/180) * (270 + 360) );
    c.strokeStyle = '#b1b1b1';
    c.lineWidth = '10';
    c.stroke();

    // 绘制蓝色进度圆环
    c.beginPath();
    c.strokeStyle = '#3949AB';
    c.lineWidth = '10';
    c.arc( posX, posY, 70, (Math.PI/180) * 270, (Math.PI/180) * (270 + deegres) );
    c.stroke();
  }
}

CSS 代码 #

:root {
  background: #fff;
}

span#procent {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 50px;
  transform: translate(-50%, -50%);
  color: #3949AB;
}

span#procent::after {
  content: '%';
}

.canvas-wrap {
  position: relative;
  width: 300px;
  height: 300px;
}

HTML 代码 #

<div class="canvas-wrap">
  <canvas id="canvas" width="300" height="300"></canvas>
  <span id="procent"></span>
</div>

说明 #

原代码通过setInterval逐帧增加角度实现动画效果，现在直接将角度设置为目标值result，一次性完成绘制，中间数值也会直接显示目标百分比（示例中为64%），无需逐步计数过渡。

内容的提问来源于stack exchange，提问作者Kerberos