一个优雅的 js canvas 时钟表盘

[kylebing]

做了个 js canvas 模拟表盘的时钟，感觉不错，后续慢慢优化。

非常喜欢 iOS 时钟那样秒针平滑移动的效果，这个也是一样。

黑色：http://kylebing.cn/tools/clock-a/?theme=black
白色：http://kylebing.cn/tools/clock-a

github: https://github.com/KyleBing/animate-clock-canvas

白色、尖指针 http://kylebing.cn/tools/clock-a?theme=white&type=pointer
白色、尖指针、罗马数字 http://kylebing.cn/tools/clock-a?theme=white&type=pointer&number=lm

[xubeiyan]

在我的老掉牙 i7-8650U 上跑了下
CPU：告辞 GPU: 告辞
表盘不需要每帧都重绘，每帧只需要重绘三根指针就行了

[caola]

数字 3 和 9 建议旋转 90 度，4-8 数字旋转 180 度

[EJW]

丝滑，很帅

[retrocode]

@xubeiyan 我测了下 应该是你浏览器没开硬件加速, 全走 cpu 了, 不得不说这效果纯走 cpu 占的有点过于多了 i9 占用直接干到 54%, 开硬件加速就正常多了 5%左右

[retrocode]

看了下代码可以优化下, draw 函数每次连表盘都重新绘制一遍, 非常消耗性能, 没必要感觉

[weixind]

杀鸡用牛刀了。其实不用上 canvas 。

[lizhenda]

很漂亮啊

[kylebing]

谢建议，在理，等优化下

[214L]

可以做一下分层，频繁更新的元素放在一个 canvas 里。

[royalknight]

直接 css 呢？对好时间，设置个旋转的 css 动画就行了

[WhateverYouLike]

很漂亮哦😯

[auvt]

好漂亮！要是在老 kindle 上打开是不是就能旧物新用了

[lisongeee]

看起来全是矢量图形，感觉可以 css+svg 实现，不需要 canvas

[kylebing]

@auvt kindle ? 性能够不够，这个挺耗资源的。

[undoing]

是我的问题吗？怎么感觉 12 和 6 没有对齐

[xiaomoxian]

好看好看 能把别人女朋友头像放表盘吗
期待

[kylebing]

@xiaomoxian 你自己可以研究研究放上去 -.-lll