弧形进度条实现，有人知道方法吗？

test=():void=>{ 
    let offContext = this.offCanvas.getContext("2d", this.settings) 
    offContext.lineCap = "round" 
    offContext.lineWidth=8 
    offContext.beginPath() 
    offContext.arc( 
      100, 
      75, 
      50, 
      (225-90) * Math.PI / 180, 
      (135-90) * Math.PI / 180 
    ) 
    offContext.strokeStyle = "#ff8c909b" 
    offContext.stroke() 
  
    offContext.beginPath() 
    offContext.arc( 
      100, 
      75, 
      50, 
      (225 - 90) * (Math.PI / 180), 
      this.radianTest===0?(135 - 90) * (Math.PI / 180):(135 - 270 * (1 -this.radianTest) - 90) * (Math.PI / 180), 
  
    ) 
    offContext.strokeStyle = this.color 
    offContext.stroke() 
    let image = this.offCanvas.transferToImageBitmap() 
    this.context.transferFromImageBitmap(image) 
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.