H5中的canvas完成动态时钟

首先需要在body中绘制一个画布,然后在画布上绘制时钟,绘制时钟主要用到了绘制圆形,

因为时钟是有刻度的,所以还会用到数组遍历,然后还要获取当前时间,所以会用到一些date的API;

效果图:

绘制画笔和圆盘,以及绘制刻度和每个刻度对应的弧度

绘制时针,分针,秒针,圆心

获取当前时间作为参数传给函数,设置定时器,每隔一秒调用一次

总结:在做的过程中,绘制时针函数的时候要注意两个参数,要结合生活中常识,

比如:6点半的时候,时针并不是指在6的位置而是6和7中间。

猜你喜欢

转载自www.cnblogs.com/hyh888/p/11586694.html