php 显示时间动态效果,使用h5 canvas实现时钟的动态效果

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这两个方法中执行自己的逻辑。但是由于事先设计没有留出足够的空白像素，用处不大。只能进行一些简单的再绘制。比如给钟面添加色彩、渐变。

相关推荐：