HarmonyOS 鸿蒙Next 进度条样式咨询

参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-progress-V5#%E7%A4%BA%E4%BE%8B6

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-components-canvas-canvas-V5

不过基于ui样式的统一，这边建议还是使用官方提供的范式。

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private centerX: number = 0
  private centerY: number = 0
  private radius: number = 0
  angle: number = -90
  start() {
    this.context.clearRect(-this.radius, -this.radius, this.context.width, this.context.height)
    this.context.beginPath()
    this.context.moveTo(0, 0)
    this.context.lineTo(0, -this.radius)
    this.context.arc(0, 0, this.radius, -Math.PI / 2, Math.PI / 180 * this.angle)
    this.context.lineTo(this.centerX * Math.cos(Math.PI / 180 * this.angle),
      this.centerY * Math.sin(Math.PI / 180 * this.angle))
    this.context.fill()
  }
  build() {
    Column() {
      Canvas(this.context).width(50).height(50).backgroundColor(Color.Pink)
        .onReady(() => {
          this.centerX = this.context.width / 2
          this.centerY = this.context.height / 2
          this.radius = this.context.width / 2
          this.context.translate(this.centerX, this.centerY)
          setInterval(() => {
            if (this.angle <= 270) {
              this.angle++
            } else {
              this.angle = -90
            }
            this.start()
          }, 10)
        })
    }.justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
  }
}