如何用JavaScript canvas制作出炫酷七彩动态时钟效果？

本文共计1518个文字，预计阅读时间需要7分钟。

利用canvas绘制彩色时钟！

1、题目（1）

要求：在页面上画出一个时钟，获取当前电脑的系统时间。

2、思路（1）

首先，我们需要了解canvas的基本用法，包括如何绘制圆形、线条等。然后，根据系统时间计算时针、分针和秒针的位置，最后在canvas上绘制出来。可以使用HTML5的API来实现这一功能。

利用canvas写七彩时钟！

1、题目

（1）、拿到一个时钟案例要求在页面上画出一个时钟，获取当前电脑的系统时间？（样式不限利用h5实现）

2、思路

（1）、首先我们要充分了解到canvas画布元素里面的图形以及线段的画法，圆的画法，时针、分针、秒针的画法；
（2）、其次，是要在页面布局渲染出一个时钟的图形，画出刻度的位置，以及时针分针秒针的位置的静态效果，方便后面定时器来实现动态效果；
（3）、做好这些工作后，最难的地方是如何将时针分针和秒针与刻度一一对应，那么我们就要用到圆的弧度制，让定时器每隔一秒钟调用一下时钟函数；
（4）、实现这些效果，为了不出现bug要及时的保存画布，以及清除画布； （5）、在用JavaScript渲染到页面即可实现功能；

3、效果展示图

4、写法

获取时间：

获取当前的系统时间：利用时间对象获取当前准确的时间，由于时间不是整数所以我们就要将时间转化为浮点型小数，为了便于之后定时器的调用，当前没有13、14、15…所以我们利用三元表达式将24小时制转化为12小时制。