轩枫阁

首页 / 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

实现代码

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

控制停止及运行

228/432
230/432

相关文章

文章评论

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

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

    [返回曲谱列表]