HarmonyOS 能否实现一个半透明蒙层，中间扣出一个透明填充的椭圆？

Question

需要实现一个半透明蒙层，中间透明镂空，以便能够展示后面的界面组件

Answer 1

请参考如下demo:

@Entry
@Component
struct ImgTest {

  //用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿，true表明开启抗锯齿。
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  //用来创建CanvasRenderingContext2D对象，通过在canvas中调用CanvasRenderingContext2D对象来绘制。
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  //用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿，true表明开启抗锯齿。
  private settings1: RenderingContextSettings = new RenderingContextSettings(true)
  //用来创建CanvasRenderingContext2D对象，通过在canvas中调用CanvasRenderingContext2D对象来绘制。
  private context1: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings1)

  @State scaleValue: number = 1.5;
  @State flag: boolean = true;
  @State circleCenterX: number = 0
  @State circleCenterY: number = 0
  @State circleRadius: number = 100

  build() {
    Column() {
      Stack(){

        // 给图片添加了一个椭圆形遮罩
        Image($r('app.media.img'))
          .width('100%')
          .height('100%')

        // 画椭圆
        Column() {
          Canvas(this.context)
            .width('100%')
            .height('100%')
            .onReady(() => {
              this.circleCenterX = this.context.width / 2
              this.circleCenterY = this.context.height / 2
              this.context.fillStyle = "#FFFFFF"
              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()
            })
            .opacity(0.5)
        }
        .scale({
          // x: this.scaleValue,
          // y: this.scaleValue,
          x: 1.5,
          y: 1,
          z: 1,
          centerX: '50%',
          centerY: '50%'
        })
        .animation({
          duration: 5000,
          curve: Curve.EaseOut,
          playMode: PlayMode.Normal
        })
      }
    }
    .height('100%')
    .width('100%')
  }
}