#鸿蒙通关秘籍#如何使用Canvas和定时器实现HarmonyOS模拟时钟？

使用Canvas和定时器在HarmonyOS中实现模拟时钟需要以下几个步骤：

1. 初始化表盘和指针图像资源

   在页面即将显示时，调用init()函数初始化表盘和指针图像，并计算当前时间，以便立即展示出准确的模拟时钟。

   private init() {
     let clockBgSource = image.createImageSource(this.resourceDir + '/' + CLOCK_BG_PATH);
     let hourSource = image.createImageSource(this.resourceDir + '/' + CLOCK_HOUR_PATH);
     let minuteSource = image.createImageSource(this.resourceDir + '/' + CLOCK_MINUTE_PATH);
     let secondSource = image.createImageSource(this.resourceDir + '/' + CLOCK_SECOND_PATH);
   
     const now = new Date();
     const currentHour = now.getHours();
     const currentMinute = now.getMinutes();
     const currentSecond = now.getSeconds();
     this.time = this.getTime(currentHour, currentMinute, currentSecond);
   
     // 创建和绘制表盘像素图
     clockBgSource.createPixelMap().then((pixelMap: image.PixelMap) => {
       this.clockPixelMap = pixelMap;
       this.paintDial();
     }).catch((err: BusinessError) => {
       console.error(`[error]error at clockBgSource.createPixelMap:${err.message}`);
     });
   
     // 创建和绘制时针像素图
     hourSource.createPixelMap().then(async (pixelMap: image.PixelMap) => {
       await paintDial;
       const hourOffset = currentMinute / 2;
       this.paintPin(ANGLE_PRE_HOUR * currentHour + hourOffset, pixelMap);
       this.hourPixelMap = pixelMap;
     }).catch((err: BusinessError) => {
       console.error(`[error]error at hourSource.createPixelMap:${err.message}`);
     });
     ...
   }
   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.

   复制

2. 监听时间变化

   设置定时器，每秒钟更新一次表盘和指针实现模拟时钟的运转。

   this.timeListener = new TimeChangeListener(
     (hour: number, minute: number, second: number) => {
       this.renderContext.clearRect(-this.clockRadius, -this.clockRadius, this.canvasSize, this.canvasSize);
       this.paintDial();
       this.timeChanged(hour, minute, second);
       this.time = this.getTime(hour, minute, second);
     },
   );
   1.
   2.
   3.
   4.
   5.
   6.
   7.
   8.

   复制

3. 绘制表盘和指针

   在绘制指针时，需注意Canvas画布旋转可能引起的状态混乱，确保在每次旋转绘制时保存并恢复画布状态。

   private paintPin(degree: number, pinImgRes: image.PixelMap | null) {
     this.renderContext.save();
     const angleToRadian = Math.PI / 180;
     let theta = degree * angleToRadian;
     this.renderContext.rotate(theta);
     this.renderContext.beginPath();
     if (pinImgRes) {
       this.renderContext.drawImage(
         pinImgRes,
         -IMAGE_WIDTH / 2,
         -this.clockRadius,
         IMAGE_WIDTH,
         this.canvasSize);
     } else {
       console.error('PixelMap is null!');
     }
     this.renderContext.restore();
   }
   1.
   2.
   3.
   4.
   5.
   6.
   7.
   8.
   9.
   10.
   11.
   12.
   13.
   14.
   15.
   16.
   17.
   18.

   复制

通过以上步骤，即可在HarmonyOS应用中实现实时更新的模拟时钟。