HarmonyOS 如何自动倒计时组件

class CircularCountDown { 
 private readonly context: CanvasRenderingContext2D; 
 private initialCountdownValue:number; 
 private countdownValue: number; 
 private countdownInterval: ESObject; 
 private radius: number; 
 private lineWidth: number; 
 private countdown: number; 
 private loadedColor: string; 
 private unloadedColor: string 
 constructor(context:CanvasRenderingContext2D, radius: number, lineWidth: number, countdown: number, loadedColor: string, unloadedColor: string) { 
  this.context = context 
  this.radius =radius 
  this.lineWidth = lineWidth 
  this.countdown = countdown 
  this.loadedColor = loadedColor 
  this.unloadedColor = unloadedColor 
  this.initialCountdownValue = this.countdown; 
  this.countdownValue = this.countdown; 
 } 
 
 start() { 
  this.countdownInterval = setInterval(() => { 
   this.countdownValue--; 
   if (this.countdownValue < 0) { 
    clearInterval(this.countdownInterval); 
    return; 
   } 
   this.draw(); 
  }, 1000); 
 } 
 
 draw() { 
  this.context.clearRect(0, 0, this.context.width, this.context.height); 
 
  // Draw unloaded part 
  this.context.beginPath(); 
  this.context.arc(this.radius, this.radius, this.radius - this.lineWidth / 2, 0, Math.PI * 2); 
  this.context.strokeStyle = this.unloadedColor; 
  this.context.lineWidth = this.lineWidth; 
  this.context.stroke(); 
 
  // Draw loaded part 
  let startAngle = -0.5 * Math.PI; 
  let endAngle = (2 * (this.initialCountdownValue - this.countdownValue) / this.initialCountdownValue - 0.5) * Math.PI; 
  this.context.beginPath(); 
  this.context.arc(this.radius, this.radius, this.radius - this.lineWidth / 2, startAngle, endAngle); 
  this.context.strokeStyle = this.loadedColor; 
  this.context.lineWidth = this.lineWidth; 
  this.context.stroke(); 
 
  // Draw remaining time 
  this.context.fillStyle = '#000'; 
  this.context.textAlign = 'center'; 
  this.context.textBaseline = 'middle'; 
  this.context.fillText(this.countdownValue.toString(), this.radius, this.radius); 
 } 
} 
// xxx.ets 
@Entry 
@Component 
struct Arc { 
 private settings: RenderingContextSettings = new RenderingContextSettings(true) 
 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 
 
 aboutToAppear(): void { 
 } 
 
 build() { 
  Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 
   Canvas(this.context) 
    .width('100%') 
    .height('100%') 
    .backgroundColor('#ffff00') 
    .onReady(() => { 
     const circularCountDown = new CircularCountDown(this.context, 100, 10, 60, '#ff000000', '#ff00dddd'); 
     circularCountDown.start(); 
    }) 
  } 
  .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.
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.