当前位置:网站首页>#夏日挑战赛# HarmonyOS canvas实现时钟
#夏日挑战赛# HarmonyOS canvas实现时钟
2022-07-01 15:41:00 【51CTO】
作者:郑瑶
前言
最近在学习HarmonyOS 相关的东西,看了很多网上的canvas 实现时钟,现在我也来写一个关于HarmonyOS 的时钟吧。
项目说明
工具版本:DevEco Studio 3.0 Beta3
SDK版本;3.1.5.5
主要用到知识:canvas js
效果展示
实现步骤
1. 在页面index.hml 中定义一个canvas 元素
2. 需要在index.js data 中定义两个变量用来存放目标元素和绘制2d
3. 需要在onShow 生命周期中拿到目标元素并且绘制 2d
4. 定义一个初始化函数initData(),调用绘制函数
5. 绘制函数clock函数
5.1 首先绘制外部最大的圆
此时的页面长这样:
5.2 绘制时间(时)刻度(12小时刻度)
此时页面:
5.3 绘制中心的小圆点
此时的页面长这样:
5.4 获取时间并且转化成北京时间
此时需要获取当前系统的本地时间,在此处遇到了一个小麻烦,鸿蒙开发者工具new Date() 获取到的时间为格林威治时间,而我们现在采用的是北京时间,需要写函数来转化时间,转化函数为getTimeStamp()
获取当前北京时间:
5.5 绘制时钟的指针
此时的页面长这样:
5.6 绘制分针的指针
此时页面长这样:
5.7 绘制秒针
此时页面长这样:
5.8 最后一步我们需要写一个更新函数用来调用所有绘画函数并且在更新函数中获取对应的北京时间:
6. 最后一步我们需要让这个钟表转动起来
那么就需要在initData 函数中写一个定时器没一秒钟执行一次绘制函数即可: 最后的图片如上图第一张图所示的效果
总结:
以上就是canvas 绘制一个时钟的全部步骤了。 最重要的一点是要能正确的获取到时间(北京时间)但是我发现在编辑器上new Date() 到的时间跟咋们的北京时间相差了八小时,在一位同事的提醒下才知道这个获取的时间为格林威治时间,那么我们需要将这个格林威治时间转化成北京时间,在网上找了一段转化方法终于转化成功。
更多原创内容请关注: 中软国际 HarmonyOS 技术团队
入门到精通、技巧到案例,系统化分享HarmonyOS开发技术,欢迎投稿和订阅,让我们一起携手前行共建鸿蒙生态。
边栏推荐
- SQL常用的四个排序函数梳理
- Returning to the top of the list, the ID is still weak
- Description | Huawei cloud store "commodity recommendation list"
- Pico,能否拯救消费级VR?
- 《性能之巅第2版》阅读笔记(五)--file-system监测
- [one day learning awk] conditions and cycles
- 说明 | 华为云云商店「商品推荐榜」
- Create employee data in SAP s/4hana by importing CSV
- Microservice tracking SQL (support Gorm query tracking under isto control)
- Qt+pcl Chapter 6 point cloud registration ICP Series 5
猜你喜欢
《性能之巅第2版》阅读笔记(五)--file-system监测
Recommendation of data acquisition tools and detailed graphic process of data acquisition list
Tanabata confession introduction: teach you to use your own profession to say love words, the success rate is 100%, I can only help you here ~ (programmer Series)
【一天学awk】函数与自定义函数
[STM32 learning] w25qxx automatic judgment capacity detection based on STM32 USB storage device
Summary of point cloud reconstruction methods I (pcl-cgal)
TensorFlow团队:我们没被抛弃
Raytheon technology rushes to the Beijing stock exchange and plans to raise 540million yuan
Microservice tracking SQL (support Gorm query tracking under isto control)
有些能力,是工作中学不来的,看看这篇超过90%同行
随机推荐
Photoshop插件-HDR(二)-脚本开发-PS插件
【一天学awk】条件与循环
[pyGame practice] do you think it's magical? Pac Man + cutting fruit combine to create a new game you haven't played! (source code attached)
Is JPMorgan futures safe to open an account? What is the account opening method of JPMorgan futures company?
Tableapi & SQL and MySQL insert data of Flink
Raytheon technology rushes to the Beijing stock exchange and plans to raise 540million yuan
Microservice tracking SQL (support Gorm query tracking under isto control)
Tableapi & SQL and MySQL data query of Flink
说明 | 华为云云商店「商品推荐榜」
二叉树的前序,中序,后续(非递归版本)
An intrusion detection model
张驰咨询:锂电池导入六西格玛咨询降低电池容量衰减
并发编程系列之什么是ForkJoin框架?
Qt+pcl Chapter 9 point cloud reconstruction Series 2
S32K1xx 微控制器的硬件设计指南
Sort out the four commonly used sorting functions in SQL
ThinkPHP advanced
C#/VB.NET 合并PDF文档
你TM到底几点下班?!!!
Phpcms background upload picture button cannot be clicked