实现类似人脸认证时中间镂空，四周颜色变换闪烁的效果

@Entry 
@Component 
struct Index { 
private settings: RenderingContextSettings = new RenderingContextSettings(true) 
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 
@State bgColor: Color = Color.Red 
@State circleCenterX: number = 0 
@State circleCenterY: number = 0 
@State circleRadius: number = 100 
private colorList: string[] = ["#ff8787", "#f783ac", "#da77f2", "#228be6", '#40c057', '#f59f00'] 
​ 
drawCircle(fillColor: string) { 
  this.context.clearRect(0, 0, this.context.width, this.context.height) 
  this.context.fillStyle = fillColor 
​ 
  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() 
​ 
  console.log("drawCircle" + fillColor) 
} 
​ 
build() { 
  Column() { 
    Button("开始闪烁").onClick(() => { 
      this.colorList.forEach((item: string, index: number) => { 
        setTimeout(() => { 
          this.drawCircle(item) 
        }, index * 500) 
      }) 
    }) 
    Stack() { 
      Image($r("app.media.startIcon")).width(100).height(100) 
      Canvas(this.context) 
        .width('100%') 
        .aspectRatio(1) 
        .backgroundColor(Color.Transparent) 
        .onReady(() => { 
          this.circleCenterX = this.context.width / 2 
          this.circleCenterY = this.context.height / 2 
          // 绘制底色 
          this.drawCircle(this.colorList[0]) 
        }) 
    } 
  }.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.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.