Question

HTML

      <canvas id="circle" width="200px" height="200px"></canvas>

JS

  var ctx = document.getElementById('circle').getContext('2d');
  ctx.lineWidth = 10 ;
  ctx.fillStyle = '#09F' ;
  ctx.strokeStyle = '#09F' ;

  var totalTime = 60 ;
  var start = 0 ;

  function bharJa() {
  let endAngle = (start/totalTime*360)-90 ;
  ctx.beginPath() ;
  ctx.arc(75,75,60,270*(Math.PI/180),endAngle*(Math.PI/180));
  ctx.stroke() ;
  start++ ;
      if(start > totalTime){
            clearInterval(intervalId)  ;
      }
  }

  var intervalId = window.setInterval(bharJa,1000);

这应该像每次传球时一样，圆圈应该以第二次传球完成。例如我的总时间是60秒＆amp;它从0开始比1分钟后圆圈完成。但是当我运行这个圈子时已经存在。

Answer 1

顺时针方向

如果最后一个参数不为真，函数ctx.arc会创建一个顺时针绘制的路径。

您正在从270到-90绘制它无法顺时针方向绘制，因此该函数绘制了一个完整的圆圈。

如果要以顺时针方向绘制，要绘制圆的一部分，第二个角应该大于第一个角度并且小于第一个角度的360度。

因此，不要设置结束角度，而是使用时间设置角度距离并将其添加到起始角度。

var ctx = document.getElementById('circle').getContext('2d');
ctx.lineWidth = 10;
ctx.strokeStyle = '#09F';

const totalTime = 60;
const startAngle = 270
var start = 0;
ctx.lineCap = "round";

function bharJa() {
  ctx.clearRect(0,0,200,200);
  const angleDist = (start / totalTime * 360);
  ctx.lineWidth = 16;
  ctx.strokeStyle = '#07D';
  ctx.beginPath();
  ctx.arc(100, 100, 60, startAngle * (Math.PI / 180), (startAngle + angleDist ) * (Math.PI / 180));
  ctx.stroke();
  ctx.lineWidth = 12;
  ctx.strokeStyle = '#09F';
  ctx.stroke();
  start++;
  if (start > totalTime) { start = 0 }

}

var intervalId = window.setInterval(bharJa, 100);

<canvas id="circle" width="200px" height="200px"></canvas>
Time * 10

为什么循环进度条没有填充时间？

1 个答案:

顺时针方向