如何实现镂空效果，有人知道吗?

@Entry 
@Component 
struct Page { 
  @State message: string = 'Hello World'; 
  private settings: RenderingContextSettings = new RenderingContextSettings(true) 
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 
  @State circleCenterX: number = 0 
  @State circleCenterY: number = 0 
  @State circleRadius: number = 100 
 
  build() { 
    Row() { 
      Column() { 
        Stack() { 
          Image($r('app.media.startIcon')).height(300) 
          // 使用Canvas绘制遮罩覆盖在图片、相机等上面 
          Canvas(this.context) 
            .width('100%') 
            .height('100%') 
            .backgroundColor('#00000000') 
            .onReady(() => { 
              this.circleCenterX = this.context.width / 2 
              this.circleCenterY = this.context.height / 2 
              this.context.fillStyle = '#aa000000' 
              // 绘制原型路径进行半透明填充 
              this.context.beginPath() 
              this.context.moveTo(0, 0) 
              this.context.lineTo(0, this.context.height) 
              this.context.lineTo(this.context.width, this.context.height) 
              this.context.lineTo(this.context.width, 0) 
              this.context.lineTo(0, 0) 
              this.context.arc(this.circleCenterX, this.circleCenterY, this.circleRadius, 0, Math.PI * 2) 
              this.context.fill() 
              this.context.closePath() 
            }) 
        }.width('1456px') 
        .height('1456px') 
      } 
      .width('100%') 
    } 
    .height('100%') 
  } 
}
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.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.