HarmonyOS Canvas 实现动画

参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-canvasrenderingcontext2d-V5

ArkTs的Canvas使用与webcanvas类似，相关动画实现可以移植webcanvas参考demo：

@Entry
@Component
struct Index {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  @State timerId: number = 0
  @State startAngle: number = Math.PI * 0.2 + (Math.PI / 180) * 90; // 起始角度（弧度制）
  @State endAngle: number = Math.PI * 1.8 + (Math.PI / 180) * 90; // 结束角度（弧度制）
  lengthToAdd: number = Math.PI / 360; // 每次绘制的长度（弧度制）
  @State currentAngle: number = 0
  @State step: number = 1;
  // 设置圆心坐标和半径
  centerX = 200;
  centerY = 200;
  radius = 100;

  aboutToAppear(): void {
    this.currentAngle = this.startAngle
    this.timerId = setInterval(() => {
      if (this.step %2 == 1) {
        this.currentAngle += this.lengthToAdd;
        this.drawArc();
        if (this.currentAngle > this.endAngle) {
          this.step++;
          this.context.globalCompositeOperation = "destination-out"; // 修改混合模式，准备擦除
          this.context.lineWidth = 21; // 擦除时，线更宽一些，防止有残留
        }
      } else {
        this.eraseArc();
        this.currentAngle -= this.lengthToAdd;
        if (this.currentAngle<= this.startAngle) {
          this.step++;
          this.context.globalCompositeOperation = "source-over"; // 修改混合模式，正常绘制
          this.context.lineWidth = 20; // 正常线宽
        }
      }
    }, 10)
  }

  drawArc() {
    // 绘制圆弧
    this.context.beginPath();
    this.context.arc(
      this.centerX, // 圆弧中心的 x 坐标
      this.centerY + 30, // 圆弧中心的 y 坐标
      this.radius, // 圆弧的半径
      this.currentAngle - this.lengthToAdd, // 圆弧的起始角度（弧度制）
      this.currentAngle + this.lengthToAdd // 圆弧的结束角度（弧度制）
    );
    this.context.stroke();
  }

  eraseArc() {
    this.context.beginPath();
    this.context.arc(
      this.centerX,
      this.centerY + 30,
      this.radius,
      this.currentAngle - this.lengthToAdd,
      this.currentAngle + 2 * this.lengthToAdd // 擦除时，擦除的更宽一些，防止有残留
    );
    this.context.stroke();
  }

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() => {
          // 设置圆弧的颜色和宽度
          this.context.strokeStyle = Color.Green;
          this.context.lineWidth = 20;
        })
    }
    .width('100%')
    .height('100%')
  }
}