天给大家用canvasu做一个时钟，希望大家自己也能够多练练，学习需要案例的积累。文章的代码自己可以拿去练习下。

这里还是要说一下我的前端学习群：594959296，从我一个人到现在的1369人都是我每篇文章每个特效聚集的小伙伴，可以说都是我们大前端的学霸啊，不定期分享干货。想学到东西的都可以来，欢迎初学和进阶中的小伙伴

主要的知识点:

• 状态保存 context.save()

• 状态恢复 context.restore()

• 旋转 context.rotate(弧度)

• 平移 context.translate(x,y) x,y 是需要移动到的目标位置坐标

• 缩放 context.scale(1.5,1.5) 1.5,1.5 是缩放比例, 将原来的画布放大1.5倍

• 画圆弧 context.arc(x,y,r,初始弧度, 最终弧度)

• 清空矩形内容context.clearRect(x,y,width,height)

• 时间(时,分,秒)的角度换算

效果图就是这样：

代码如下：

学习javascript也是有门槛的，就是你的html和css至少还比较熟练，您不能连html这东东是干啥的都不知道就开始学javascript了，学乘除前，学好加减法总是有益无害的。

再说二点建议：

1. 不要急着看一些复杂的javascript网页特效的代码，这样除了打击你的自信心，什么也学不到

2. 看网上什么几天精通javascript的，直接跳过吧，没戏

如果想看到更加系统的文章和学习方法经验可以关注我的微信公众号：‘web前端课程’关注后回复‘给我资料’可以领取一套完整的学习视频

款基于HTML5和CSS3的圆盘时钟动画，它的特点是圆盘时钟侧边带有实时更新的数字时钟，而且时钟在走动时还会发出滴答滴答的声音。

效果图

代码：

JavaScript代码：

页面布局：

css样式：