这是一个创建于 97 天前的主题，其中的信息可能已经有所发展或是发生改变。
做了个 js canvas 模拟表盘的时钟，感觉不错，后续慢慢优化。
非常喜欢 iOS 时钟那样秒针平滑移动的效果，这个也是一样。
黑色：http://kylebing.cn/tools/clock-a/?theme=black
白色：http://kylebing.cn/tools/clock-a
第 1 条附言 · 97 天前
17 条回复 • 2024-08-18 08:08:55 +08:00
 |
1
xubeiyan 97 天前
在我的老掉牙 i7-8650U 上跑了下
CPU：告辞 GPU: 告辞 表盘不需要每帧都重绘，每帧只需要重绘三根指针就行了 |
 |
2
caola 97 天前
数字 3 和 9 建议旋转 90 度，4-8 数字旋转 180 度
|
 |
3
EJW 97 天前
丝滑，很帅
|
 |
4
retrocode 97 天前
@xubeiyan 我测了下 应该是你浏览器没开硬件加速, 全走 cpu 了, 不得不说这效果纯走 cpu 占的有点过于多了 i9 占用直接干到 54%, 开硬件加速就正常多了 5%左右
|
|
5
retrocode 97 天前
看了下代码可以优化下, draw 函数每次连表盘都重新绘制一遍, 非常消耗性能, 没必要感觉
|
 |
6
weixind 97 天前
杀鸡用牛刀了。其实不用上 canvas 。
|
 |
7
lizhenda 97 天前
很漂亮啊
|
 |
8
kylebing OP 谢建议，在理，等优化下
|
 |
9
214L 97 天前
可以做一下分层，频繁更新的元素放在一个 canvas 里。
|
 |
10
royalknight 97 天前
直接 css 呢？对好时间，设置个旋转的 css 动画就行了
|
 |
11
WhateverYouLike 97 天前 via iPhone
很漂亮哦😯
|
 |
12
auvt 97 天前 via iPhone
好漂亮！要是在老 kindle 上打开是不是就能旧物新用了
|
 |
13
lisongeee 97 天前
看起来全是矢量图形，感觉可以 css+svg 实现，不需要 canvas
|
 |
15
undoing 96 天前
是我的问题吗？怎么感觉 12 和 6 没有对齐
|
 |
16
xiaomoxian 95 天前 via Android
好看好看 能把别人女朋友头像放表盘吗
期待 |
|
17
kylebing OP @xiaomoxian 你自己可以研究研究放上去 -.-lll
|
Select Language