Canvas-sketch中圆弧绕中心旋转动画实现故障求助

我在使用canvas-sketch库（基于HTML5 Canvas）实现圆弧绕中心圆周运动的动画时遇到异常：预期效果为圆弧整体绕中心做圆周运动，但实际表现为起始角度的线条固定，圆弧仅不断延伸。我先尝试修改startAngle与endAngle但无效果，后尝试仅通过旋转实现，仍未达到预期，已卡壳一个月。现有Arcs类包含update（更新旋转角度）、drawUpdate（绘制圆弧）等方法，附上代码，恳请技术帮助。

代码实现 #

const canvasSketch = require('canvas-sketch');
const math = require('canvas-sketch-util/math');
const random = require('canvas-sketch-util/random');

// TODO:
// - Create a moving arcs
//    - Create a class from arc drawing.

const settings = {
  dimensions: [ 1080, 1080 ],
  animate: true
};

const sketch = ({context, width, height}) => {
  const arcs = [];
  const num = 3;
  const cy = height * 0.5;
  const cx = width * 0.5;

  context.fillStyle = 'white';
  context.fillRect(0, 0, width, height);

  context.fillStyle = 'black';

  const w = width  * 0.01;
  const h = height * 0.1;
  let x, y;

  const radius = width * 0.3;

  for (let i = 0; i < num; i++) {
    arcs.push(new Arcs(width, height));

    const slice = math.degToRad(360 / num);
    const angle = slice * i;

    x = cx + radius * Math.sin(angle);
    y = cy + radius * Math.cos(angle);

    // Drawing the lines
    context.save();
    context.translate(x, y);
    context.rotate(-angle);
    context.scale(random.range(1, 2), random.range(1,2));

    context.beginPath();
    context.rect(-w * 0.5, random.range(0, -h * 0.5), w, h);
    context.fill();
    context.restore();

    // Drawing the Arcsw
    // arcs[i].drawUpdate(context);
  }


  return ({ context, width, height }) => {

    arcs.forEach((arc, i) => {
      // console.log("forEach")
      arc.update()
      arc.drawUpdate(context)
    });



  };
};

canvasSketch(sketch, settings);

class Arcs {
  constructor(width, height){
    this.width = width;
    this.height = height;

    this.cx = width * 0.5;
    this.cy = height * 0.5;
    this.rotationAngle = 0;
    // this.lineWidth = lineWidth;
    // this.slice = slice;

    this.radius =  width * 0.3;
    this.lineWidth = random.range(5, 10);

    this.radius = width * 0.3 * random.range(1, 2);
    this.angleStart = random.range(math.degToRad(0), math.degToRad(360));
    this.angleEnd = random.range(math.degToRad(0), math.degToRad(360));
  }

  drawUpdate(context){
    // console.log("drawUpdate()");
    context.save();
    context.translate(this.cx, this.cy);
    context.rotate(this.rotationAngle);

    context.lineWidth = this.lineWidth

    context.beginPath();
    context.arc(0, 0,
      this.radius,
      this.angleStart,
      this.angleEnd);
    context.stroke();

    // console.log("angleStart " + this.angleStart);
    // console.log("angleEnd " + this.angleEnd);

    context.restore();

  }

  update(){
    this.rotationAngle += math.degToRad(0.1);    
  }
}

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