HarmonyOS 如何画一个半圆，并进行一个从0°到360°的动画？

Question

如题：HarmonyOS 如何画一个半圆，并进行一个从0°到360°的动画？

Answer 1

请参考此demo：

@Entry
@Component
struct Arc {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private path2Db: Path2D = new Path2D()

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .borderStyle(BorderStyle.Dotted)
        .transition(TransitionEffect.OPACITY.animation({ duration: 2000, curve: Curve.Ease }).combine(
          TransitionEffect.rotate({ z: 1, angle: 180 }) //进行360旋转
        ))
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.path2Db.arc(200, 300, 100, 0, 3.14) //用arc画半圆
          this.context.stroke(this.path2Db)
        })
    }
    .width('100%')
    .height('100%')
  }
}