最近学习了canvas之后，就用canvas制作了一个主题可配置化，可拖拽时钟。话不多说，直接看效果图：

具体的实现思路也很简单：首先绘制表盘，其次绘制时针分针秒针，然后获取时间进行渲染，最后用定时器每秒绘制一次即可。为了实现主题可配置，对外暴露构造函数，构造函数的参数为可配置化对象。至于拖拽效果，给时钟注册对应的事件监听就好了。

• 主要用到的方法:

fillText(element, x, y);   //在指定位置绘制文本
arc(x, y, r, 0, 2 * Math.PI); //绘制圆
fill()           //填充路径
stroke()         //绘制路径
save()           //保存当前环境的状态
restore()        //返回之前保存过的路径状态和属性
rotate(angle)    //旋转当前的绘图。 
translate(x,y)   //重新映射画布上的 (0,0) 位置。   

• 要点：
  • translate(width / 2, height / 2) 使canvas的(0,0) 位置为canvas的中心。
  • fillText(element, x, y) 绘制表盘上的数字时，如何确定它的位置x,y。
    x= Math.cos(rad) * r; y=Math.sin(rad) * r
  • rotate(angle) 其实指针并没有转动，转动的是canvas画布。
  • save() restore() 绘制之前保存当前环境状态，绘制之后返回之前保存过的环境。

具体的实现代码已上传至GitHub，有兴趣的可以去源码，github地址。
大家的平时工作中如果需要用到的话，可以使用我的Clock插件，插件的使用方法详见使用说明。
欢迎大家指出不足，共同进步。