做了个 js canvas 模拟表盘的时钟，感觉不错，后续慢慢优化。
非常喜欢 iOS 时钟那样秒针平滑移动的效果，这个也是一样。
黑色：http://kylebing.cn/tools/clock-a/?theme=black
白色：http://kylebing.cn/tools/clock-a
爱意满满的作品展示区。
This topic created in 812 days ago, the information mentioned may be changed or developed.
Supplement 1 · Aug 16, 2024
 |
xubeiyanAug 16, 2024
1
在我的老掉牙 i7-8650U 上跑了下
CPU：告辞 GPU: 告辞 表盘不需要每帧都重绘，每帧只需要重绘三根指针就行了 |
 |
caolaAug 16, 2024
2
数字 3 和 9 建议旋转 90 度，4-8 数字旋转 180 度
|
 |
EJWAug 16, 2024
3
丝滑，很帅
|
 |
cvoocAug 16, 2024
4
@xubeiyan 我测了下 应该是你浏览器没开硬件加速, 全走 cpu 了, 不得不说这效果纯走 cpu 占的有点过于多了 i9 占用直接干到 54%, 开硬件加速就正常多了 5%左右
|
|
cvoocAug 16, 2024
5
看了下代码可以优化下, draw 函数每次连表盘都重新绘制一遍, 非常消耗性能, 没必要感觉
|
 |
weixindAug 16, 2024
6
杀鸡用牛刀了。其实不用上 canvas 。
|
 |
lizhendaAug 16, 2024
7
很漂亮啊
|
 |
8
谢建议，在理，等优化下
|
 |
214LAug 16, 2024
9
可以做一下分层，频繁更新的元素放在一个 canvas 里。
|
 |
royalknightAug 16, 2024
10
直接 css 呢？对好时间，设置个旋转的 css 动画就行了
|
 |
JaufeyAug 16, 2024 via iPhone
11
很漂亮哦😯
|
 |
auvtAug 16, 2024 via iPhone
12
好漂亮！要是在老 kindle 上打开是不是就能旧物新用了
|
 |
lisongeeeAug 16, 2024
13
看起来全是矢量图形，感觉可以 css+svg 实现，不需要 canvas
|
 |
undoingAug 17, 2024
15
是我的问题吗？怎么感觉 12 和 6 没有对齐
|
 |
xiaomoxianAug 18, 2024 via Android
16
好看好看 能把别人女朋友头像放表盘吗
期待 |
|
17
@xiaomoxian 你自己可以研究研究放上去 -.-lll
|
Select Language