轩枫阁

首页 / Web前端 / HTML / 基于canvas实现的旋转时间圆点

基于canvas实现的旋转时间圆点

时间是指宏观一切具有不停止的持续性和不可逆性的物质状态的各种变化过程,其有共同性质的连续事件的度量衡的总称。时是客观存在,而间是人们的思想所划分的

前言

如何表示时间在走呢?如何实现时间可视化呢?就如轩枫阁的轮播图,用高级浏览器就可以看到图片右下角有个会动的圆点,当圆点旋转一周(9s),图片即切换,将时间生动的刻画出来。

实现原理

  • canvas绘制蓝色圆形
  • canvas绘制白色扇形
  • 白色扇形的度数随着时间变大

弧度制单位

rad 角度制单位:度 → 180度 = PI弧度 → 1度 = PI弧度/180度 → 1弧度= 180度/PI弧度

弧度 = 角度*PI/180

角度 = 弧度*180/PI

arc

如何实现时间控制

step为每100ms走的弧度,那么走一圈经理的时间就是36000/4=9000ms=9s

demo演示

http://xuanfengge.com/demo/201401/dot_canvas.html

实现代码

主要是实现,代码结构写的很烂  – –

控制停止及运行

266/470
268/470

相关阅读

文章评论

  • 看了,感觉不错,谢谢您提供

  • 赞一个~ 网站很棒~~但是首页右侧建议做个跟随边栏~~~祝越做越好~~

    • 这个在上一版本的主题中有的,但是后来出现了一些小bug就取消了,后面我会加上。谢谢提议

      • 太客气了~~内什么,不知道主题可否发我一份~~先谢谢~

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子