最近学习了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插件，插件的使用方法详见使用说明。
欢迎大家指出不足，共同进步。
