HarmonyOS 类似人脸识别，底层是相机（或者图片），上层是蒙层，蒙层中间是圆圈，圆圈中间透明

参考demo:

@Entry
@Component
struct Index {
  //用来配置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;
  @State flag: boolean = true;
  @State circleCenterX: number = 0
  @State circleCenterY: number = 0
  @State circleRadius: number = 100

  build() {
    Column({ space: 15 }) {

      Stack() {
        // 给图片添加了一个圆形遮罩
        Image($r('app.media.namei'))
          .width('900px').height('1080px')

        // 画圆。整体放大缩小
        Column() {
          Canvas(this.context)
            .width(300)
            .height(360)
            .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()
            })
        }
        .width(300).height(360)
        .scale({
          x: this.scaleValue,
          y: this.scaleValue,
          z: 1,
          centerX: '50%',
          centerY: '50%'
        })
        .animation({
          duration: 5000,
          curve: Curve.EaseOut,
          playMode: PlayMode.Normal
        })

        // 使用矩形来包住圆圈，使之圆圈放大缩小不会露出底层的图片
        Column() {
          Canvas(this.context1)
            .width('100%')
            .height('100%')
            .onReady(() => {
              this.context1.fillStyle = '#FFFFFF';
              this.context1.fillRect(0, 0, 500, 600);
              this.context1.clearRect(100, 120, 300,350);
            })
        }
        .width(500).height(600)
      }

      Button('Change')
        .onClick(() => {
          if (this.flag) {
            this.scaleValue = 1;
          } else {
            this.scaleValue = 1.3;
          }
          this.flag = !this.flag
        })

    }
    .width('100%')
    .height('100%')
    .margin({ top: 15 })
    .justifyContent(FlexAlign.SpaceBetween)
    .backgroundColor(Color.Blue)
  }
}
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.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.