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

星期日 2014/01/19 16:16 阅读：22499 评论：4 作者：ivan 分类：HTML、Javascript、Web前端、授人以渔

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

前言

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

实现原理

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

弧度制单位

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

弧度 = 角度*PI/180

角度 = 弧度*180/PI

如何实现时间控制

var step = 4;

// 0.5*Math.PI=从90°开始 1度=Math.PI/180

var dps = -0.5*Math.PI + Math.PI/180*step;

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

demo演示

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

实现代码

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

// 获取canvas及2d上下文

var canvas=document.getElementById("dotCanvas");

var context=canvas.getContext("2d");

// 蓝色圆

context.fillStyle="#39c"; //圆点颜色

context.beginPath(); //路径开始

context.arc(6, 6, 6, 0, 2*Math.PI); //创建圆（x, y, r, sAngle, sAngle）

context.closePath(); //路径关闭

context.fill(); //绘制填充

var step = 4;

// 0.5*Math.PI=从90°开始 1度=Math.PI/180

var dps = -0.5*Math.PI + Math.PI/180*step;

// 1毫秒画一次

var intervalId = setInterval(function(){

drawCircle();

},100);

// 画白圆

function drawCircle(){

// 接近一圈时，重置画布

if (Math.abs(dps-1.5*Math.PI) < 0.000001){

clearInterval(intervalId);

resetCanvas();

spinCanvas();

}

// 白色圆

var canvas=document.getElementById("dotCanvas");

var context=canvas.getContext("2d");

context.fillStyle="#FFF";

context.beginPath();

context.arc(6, 6, 6, -0.5*Math.PI, dps, false); //False = 顺时针，true = 逆时针

context.lineTo(6,6);

context.closePath();

context.fill();

dps += Math.PI/180*step; //每次增加的度数

}

// 转完一圈，继续转

function spinCanvas(){

dps = -0.5*Math.PI+Math.PI/180*step;

clearInterval(intervalId);

var canvas=document.getElementById("dotCanvas");

var context=canvas.getContext("2d");

context.fillStyle="#39c";

context.beginPath();

context.arc(6,6,6,0,2*Math.PI);

context.closePath();

context.fill();

intervalId = setInterval(function(){

drawCircle();

},100);

}

// 重置蓝圆

function resetCanvas(){

var canvas=document.getElementById("dotCanvas");

var context=canvas.getContext("2d");

context.clearRect(0,0,12,12);

context.fillStyle="#39c";

context.beginPath();

context.arc(6,6,6,0,2*Math.PI);

context.lineTo(6,6);

context.closePath();

context.fill();

}

控制停止及运行

// hover时重置

$("#dotCanvas").hover(function(){

resetCanvas();

clearInterval(intervalId);

},function(){

// 继续走

spinCanvas();

});

文章评论 4 条

美女求约会

看了，感觉不错，谢谢您提供

2015 年 12 月 7 日下午 12:09
Faris

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

2014 年 2 月 2 日下午 6:49
- 轩枫
  
  这个在上一版本的主题中有的，但是后来出现了一些小bug就取消了，后面我会加上。谢谢提议
  
  2014 年 2 月 11 日下午 9:55
  - Faris
    
    太客气了~~内什么，不知道主题可否发我一份~~先谢谢~
    
    2014 年 2 月 11 日下午 10:53