使用canvas绘制走动的钟表

效果图:

使用canvas绘制走动的钟表_第1张图片
Paste_Image.png

思路:
1.设置画布
2.利用ctx.arc绘制出大圆
3.利用for循环绘制钟表的刻度值(小时每个刻度间隔30度,分钟每个刻度间隔6度),注意设置画布的原点位置
4.设置时针、分针、秒针
5.获取当期时间,并设置对应的小时、分钟、秒的时间
6.设置指针走动:
6.1清屏
6.2重新绘制钟表的大圆和刻度值
6.3利用ctx.rotate设置时分秒针的旋转
另:写完了就发上来了,代码没经过优化,请各位大神谅解。

直接上代码
html:


css:


javascript:


你可能感兴趣的:(使用canvas绘制走动的钟表)