当前位置:网站首页>Summer Challenge harmonyos canvas realize clock
Summer Challenge harmonyos canvas realize clock
2022-07-01 15:53:00 【51CTO】
author : Zheng Yao
This article is participating in the starlight project 3.0– Summer Challenge
Preface
Studying recently HarmonyOS Relevant stuff , Read a lot of online canvas Realize the clock , Now I also want to write a story about HarmonyOS Your clock .
Project description
Tool version :DevEco Studio 3.0 Beta3
SDK edition ;3.1.5.5
It mainly uses knowledge :canvas js
Effect display
Implementation steps
1. On the page index.hml Define a canvas Elements
2. Need to be in index.js data Two variables are defined in to store the target element and draw 2d
3. Need to be in onShow Get the target element in the life cycle and draw 2d
4. Define an initialization function initData(), Call the draw function
5. Draw function clock function
5.1 First draw the largest circle on the outside
At this time, the page is so long :
5.2 Draw time ( when ) scale (12 Hour scale )
Now the page :
5.3 Draw a small dot in the center
At this time, the page is so long :
5.4 Get time and convert it into Beijing time
At this time, you need to get the local time of the current system , I have a little trouble here , Hongmeng developer tool new Date() The obtained time is Greenwich mean time , Now we use Beijing time , You need to write a function to convert time , The conversion function is getTimeStamp()
Get the current Beijing time :
5.5 Draw the pointer of the clock
At this time, the page is so long :
5.6 Draw the pointer of the minute hand
At this time, the page looks like this :
5.7 Draw a second hand
At this time, the page looks like this :
5.8 Finally, we need to write an update function to call all painting functions and get the corresponding Beijing time in the update function :
6. The last step is to make the clock turn
So you need to be in initData Write a timer in the function and execute the drawing function every second : The final picture is as shown in the first picture above
summary :
That's all canvas All the steps of drawing a clock . The most important thing is to get the time correctly ( Beijing time. ) But I found in the editor new Date() The time of arrival is eight hours away from our Beijing time , Only under the reminder of a colleague did I know that the obtained time was Greenwich mean time , Then we need to convert this Greenwich mean time into Beijing time , I found a transformation method on the Internet, and finally the transformation was successful .
For more original content, please pay attention to : China soft International HarmonyOS Technical team
Beginner to master 、 Skills to cases , Systematic sharing HarmonyOS Development technology , Welcome to contribute and subscribe , Let's move forward hand in hand to build Hongmeng ecology .
Want to know more about open source , Please visit :
边栏推荐
- Crypto Daily:孙宇晨在MC12上倡议用数字化技术解决全球问题
- Qt+pcl Chapter 6 point cloud registration ICP series 3
- Thinkphp内核工单系统源码商业开源版 多用户+多客服+短信+邮件通知
- Smart Party Building: faith through time and space | 7.1 dedication
- Qt+pcl Chapter 6 point cloud registration ICP Series 5
- Qt+pcl Chapter 6 point cloud registration ICP Series 2
- Description | Huawei cloud store "commodity recommendation list"
- Overview | slam of laser and vision fusion
- 远程办公经验?来一场自问自答的介绍吧~ | 社区征文
- 自動、智能、可視!深信服SSLO方案背後的八大設計
猜你喜欢
[one day learning awk] function and user-defined function
新出生的机器狗,打滚1小时后自己掌握走路,吴恩达开山大弟子最新成果
张驰咨询:家电企业用六西格玛项目减少客户非合理退货案例
[one day learning awk] conditions and cycles
The newly born robot dog can walk by himself after rolling for an hour. The latest achievement of Wu Enda's eldest disciple
Photoshop plug-in HDR (II) - script development PS plug-in
Automatique, intelligent, visuel! Forte conviction des huit conceptions derrière la solution sslo
Detailed explanation of stm32adc analog / digital conversion
Stm32f4-tft-spi timing logic analyzer commissioning record
三星率先投产3nm芯片,上海应届硕士生可直接落户,南开成立芯片科学中心,今日更多大新闻在此...
随机推荐
【目标跟踪】|STARK
如何写出好代码 - 防御式编程指南
What time do you get off work?!!!
Microservice tracking SQL (support Gorm query tracking under isto control)
"Qt+pcl Chapter 6" point cloud registration ICP Series 6
Using swiper to make mobile phone rotation map
Crypto Daily:孙宇晨在MC12上倡议用数字化技术解决全球问题
Pico,能否拯救消费级VR?
使用 csv 导入的方式在 SAP S/4HANA 里创建 employee 数据
三星率先投产3nm芯片,上海应届硕士生可直接落户,南开成立芯片科学中心,今日更多大新闻在此...
Smart Party Building: faith through time and space | 7.1 dedication
微服务追踪SQL(支持Isto管控下的gorm查询追踪)
新出生的机器狗,打滚1小时后自己掌握走路,吴恩达开山大弟子最新成果
ABAP-屏幕切换时,刷新上一个屏幕
【Pygame实战】你说神奇不神奇?吃豆人+切水果结合出一款你没玩过的新游戏!(附源码)
process.env.NODE_ENV
大龄测试/开发程序员该何去何从?是否会被时代抛弃?
Win11如何设置用户权限?Win11设置用户权限的方法
七夕表白攻略:教你用自己的专业说情话,成功率100%,我只能帮你们到这里了啊~(程序员系列)
Hardware design guide for s32k1xx microcontroller