新手小白包教包会的 —— canvas画时钟

本次画时钟的几个步骤： 1. 布置静态表盘。 2. 布置数字 3.设置时分秒的指针转动速度

技术点： canvas 和 javaScript 

思路： 利用canvas画圆 和 利用 js获取时间戳，动态绘制表盘，实现时钟指针的走动。

关于canvas的简单介绍： canvas标签上要绑定宽，高； canvas的默认中心点为左上角，默认的水平方向为x轴；
这3点在之后的时钟制作中都需要知道。

下面是思路详解：

1. 静态表盘    
         这部分比较简单，基本都是canvas的API。
   

2. 布置数字

这部分的整体思路就是：设置fillText( 文本,  坐标x,  坐标y )；（文本为：1，2，3，4...11，12）

重点是获取文本的坐标 x, y 

这里，我们利用的是Math的两个API : Math.sin 正弦 和 Math.cos 余弦 来求得当前的文字坐标x，y （ 不懂sin 和 cos 可以看一下勾股定理 ）

因为canvas的默认圆心为左上角，所以，我们要移动圆心，分别加上宽 和 高 的 一半。

3.绘制指针

这部分就是之前说的，在一定的时间内重绘。来实现转动的效果

这里有一个clearRect（），清空给定矩形的指定像素

这里有一个地方需要注意：因为系统返回的时间是24小时制，表盘上是12小时制的，所以，是需要做一下判断的：

h > 12 ? h = h -12 : h;

这里绘制时分秒的方法是c.arc(x, y ,r , (h * 30 - 90) * Math.PI / 180,  (h * 30 + 1 - 90) * Math.PI / 180, false ) );

注意： 这里 要 - 90度的，之前提到的，canvas的默认水平方向是X轴。

到了这里，一个简单的时钟效果就制动完成了。如果有什么好的建议希望大家指出。

如果觉得对您有帮助，那就给个赞呗。

效果图、代码 如下：

    
        
    
    


    您的浏览器不支持canvas