您现在的位置是:首页 > 学无止境 > 其他网站首页其他 利用canvas画一个实时时钟

利用canvas画一个实时时钟

  • 莫愁
  • 其他
  • 2019-03-04
简介如何利用canvas来画一个实时时钟呢,下面我就给大家分享我的方法。
字数 4425
第一步创建一个canvas画布:
第二步获取它的高度和宽度,然后定义时钟的半径:
第三步画表盘的中心:
第四步画一个圆,我在这加了个渐变色。(arc()中的五个参数分别是arc(圆心x坐标,圆心y坐标,半径,起始角,结束角,Boolean值))
第五步定义一个数组来装表盘上的数字,然后通过循环的方式将他们打印在表盘上,这里最主要的就是要算出每个数字打印的坐标,我们可以先算出每两个数字间的弧度,然后就可以根据相应的弧度算出每个数字的位置:
第六步,表盘上的刻度也是同样的方法,整点的位置上的点我们可以用一点不同的颜色:
第七步是时针部分,绘制指针的时候,可以使用linecap属性给两端稍加一点弧度。(使用lineCap之后不能用closePath())算出时针应该转动的角度,然后利用rotate()方法转动它:
然后是分针和秒针:
最后一步为了使我们画的时钟能够使用,我们需要获取到当前的时间,并把时分秒分别赋给相应的变量后传到相应的函数中,之后用定时器每隔一秒调用一次此函数,就能达到时钟的效果:
最后的完整源代码:


转载: 感谢您对莫愁个人博客网站平台的认可,非常欢迎各位朋友分享到个人站长或者朋友圈,但转载请说明文章出处“来源莫愁个人博客 https://www.mochoublog.com/study/98.html”。

文章评论

    • 评论
    人参与,条评论

技术在线

服务时间

周一至周日 12:00-22:00

关闭下雪
关闭背景特效