HarmonyOS-基于canvas绘制复古钟表 原创 精华
中软小助手
发布于 2022-2-25 11:21
浏览
3收藏
作者:罗鹏荣
一、前言
找个空闲的时间,将目光聚焦到钟表上。开始你会感觉流逝的只是滴滴答答,一分一秒的时间,而慢慢的你会感觉到消逝的是你无声无息的生命。 今天分享一个利用canvas绘制时钟的写法,实现模拟时钟的功能,钟表时间与系统时间保持一致,刻度将24小时制转换为12小时制。
效果展示
二、canvas的属性、方法
2.案例中使用到的属性和方法:
属性 | 方法 |
---|---|
getContext() | 返回一个用于在画布上绘图的环境 |
strokeStyle | 画笔(绘制图形)颜色或者样式的属性 |
lineWidth | 设置线段厚度的属性 |
save() | 保存canvas全部状态的方法(入栈) |
beginPath() | 创建一个新的路径的方法 |
arc(原点x,原点y,半径,起始角度,结束角度,默认false顺时针) | 绘制圆弧路径的方法 |
stroke() | 绘制路径的方法 |
closePath() | 闭合绘制路径 |
restore() | 恢复到最近的保存状态的方法(出栈) |
fillStyle | 颜色和样式的属性 |
三、创建画布。
四、获取当前时间并转换为12小时制
五、绘制表盘
六、绘制分刻度
七、绘制时刻度
八、绘制时钟
九、绘制分钟
十、绘制秒钟
源码地址
https://gitee.com/luopengrong/harmonyos/tree/clock
总结
此时能得到一个静态时钟图,将步骤四到步骤十的代码封装成drawclock() 函数,采用setInterval()函数的功能,每1000ms,运行一次drawclock() 函数,这样就每一秒画一次,显示的就是时钟啦!本次分享希望对大家有所帮助。
更多原创内容请关注:中软国际 HarmonyOS 技术团队
入门到精通、技巧到案例,系统化分享HarmonyOS开发技术,欢迎投稿和订阅,让我们一起携手前行共建鸿蒙生态。
©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
已于2022-2-25 11:43:03修改
赞
8
收藏 3
回复
8
1
3
相关推荐
可以,马上学习一波