canvas 绘制好时钟界面，使用定时器定时重绘整个canvas，就实现了仿真动态时钟的效果。
难点在于：秒钟刻度和时钟刻度的绘制
整点文字沿着内边圆形环绕
其中刻度的环绕并不难计算，文字的环绕就比较坑爹了，canvas绘制的文字是在绘制坐标之上的(文字基线和对齐方式影响)，需要进行偏移的计算，使之文字中点正好落在圆上。
这一步相当淡疼，由于api中并没有测量字高的办法，而使用fontSize，其实也并不是字的准确高度，因此，y坐标+二分之一行高向下偏移，使之垂直居中，却总是不够准确的。而x坐标+二分之一行宽向左偏移，使之水平居中，则没有这个问题，因为api提供了测量行宽的方法。
一切都是因为 ctx.measureText(text).width 存在，但 ctx.measureText(numText).height 不存在。打印测量结果，也只有一个宽度属性。文档中说canvas对于绘制文字的支持比较弱，从这一点上看 何止是弱。
直接设置基线和对齐方式为居中，似乎也存在一定误差，看起来总不是那么赏心悦目。下面的代码中两种方式都写了。
会走的时钟预览：
时间显示可能略有误差。
知识点和求解参考图主要知识点为圆的坐标公式，和三角函数sin，cos计算。实际上，圆的坐标公式使用的并不多，引入求值反而可能复杂化。
下图是计算刻度线坐标和整点文字绘制坐标的参考图：
canvas画时钟效果的代码编写
下面是全部代码：
时钟
说明：
1、clockHelper第一个参数传入画布。第二个参数传入时钟界面的配置对象，包括指针、刻度的颜色、大小等，配置项和clockHelper中的deConfig默认对象是相对的，参考deConfig的属性传入参数即可。
2、clockHelper的封装性略差，仅是基本能用型。但属性不多，改造应该并不困难。
3、提供了时钟界面绘制之前和之后的方法，可以在beforeDraw和afterDraw这两个方法中执行自己的逻辑。但是由于事先设计没有留出足够的空白像素，用处不大。只能进行一些简单的再绘制。比如给钟面添加色彩、渐变。
相关推荐：
如果觉得《php 显示时间动态效果 使用h5 canvas实现时钟的动态效果》对你有帮助，请点赞、收藏，并留下你的观点哦！
