HarmonyOS 鸿蒙Next 清除区域如何带圆角

参考demo

@Entry
@Component
struct ClearRect {
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#F5DC62')
        .onReady(() =>{
          // 设定填充样式，填充颜色设为蓝色
          this.context.fillStyle = '#0097D4';
          // 以(50, 50)为左上顶点，画一个宽高200的矩形
          this.context.fillRect(50,50,200,200);

          // 绘制圆角矩形
          const x = 60;
          const y = 60;
          const width = 180;
          const height = 180;
          const radius = 20;
          this.context.moveTo(x + radius, y);
          this.context.lineTo(x + width - radius, y);
          this.context.arcTo(x + width, y, x + width, y + radius, radius);
          this.context.lineTo(x + width, y + height - radius);
          this.context.arcTo(x + width, y + height, x + width - radius, y + height, radius);
          this.context.lineTo(x + radius, y + height);
          this.context.arcTo(x, y + height, x, y + height - radius, radius);
          this.context.lineTo(x, y + radius);
          this.context.arcTo(x, y, x + radius, y, radius);

          // 将绘制的路径设置为当前的剪切路径
          this.context.clip();

          // 清除矩形区域内的像素
          this.context.clearRect(x, y, width, height);
        })
    }
    .width('100%')
    .height('100%')
  }
}