使用h5canvas实现时钟动态效果的案例-创新互联

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

感谢各位的阅读！看完上述内容，你们对使用h5 canvas实现时钟动态效果的案例大概了解了吗？希望文章内容对大家有所帮助。如果想了解更多相关文章内容，欢迎关注创新互联网站制作公司行业资讯频道。

标题名称：使用h5canvas实现时钟动态效果的案例-创新互联
当前路径：http://cxhlcq.com/article/dgosig.html