circle_clock 简单canvas实现圆弧时钟

摘要：渣渣成品图最近对于圆形有种特别的感情呢因为写了个就像到了用来做时钟大概会比较有趣吧所以就着手写了个这样的一个东西大概代码上错漏还是蛮多的接下来分享下关于如何开发一个圆形时钟条吧使用这次就没有采用的方法来实现圆环了因为我想要做多层嵌套的圆环觉

渣渣成品图:
http://codepen.io/thewindswor...

最近对于圆形有种特别的感情呢...因为写了个cricle_process_bar就像到了用来做时钟大概会比较有趣吧,所以就着手写了个这样的一个东西.大概代码上错漏还是蛮多的.接下来分享下关于如何开发一个圆形时钟条吧~_~

使用:
Jade
canvas

这次就没有采用div+css的方法来实现圆环了,因为我想要做多层嵌套的圆环,觉得还是使用canvas比较容易吧.然后就去了解了下canvas.
首先是HTML结构

canvas#myCircleClock(width = "300",height = "300")
= 

当然要是考虑到兼容的话我们可以在canvas标签里面添加提示语句

你的浏览器该升级了

接下来为了让我们更直观的看到canvas的区域我们可以为它添加样式.

#myCircleClock{
  border:1px dashed #ccc;
}

好的,这样我们就可以看到画布边缘很清晰的显示出来了.
接下来就开始写我们的主要代码了.假如对canvas不清楚的,下面有直通车
https://developer.mozilla.org...

首先,我们需要3个圆环嵌套在一起,分别表示小时hour,分钟minute,秒second
然后它们需要和跟着时间自动填充进度,也就是重绘.
需要时间,那自然就是var now = new Date()获取了时间先了

now.getHours()        获取小时
now.getMinutes()      获取分钟
now.getSeconds()    获取秒数

我们先进行canvas绘画的前提工作吧

var canvas = document.getElementById("myCircleClock");
var ctx = canvas.getContext("2d");

这样我们就获取到渲染上下文ctx啦.然后我们要画圆环,这就要用到

ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise)

其中anticlockwise为boolean值,如果为true,逆时针绘制,默认为false,也就是顺时针.可以看出我们做顺时针时钟不需要用到这个属性.
接下来x,y代表圆心的坐标
radius就是半径啦.
startAngle就是圆弧起始点,单位为弧度,也就是Math.PI/360啦
endAngle也就是圆弧的终点啦

使用它之前我们先看一张图

可以清晰看出我们需要的起始点为-Math.PI/2,终点为3*Math.PI/2.

我们需要3个圆环,要绘制很简单,3次arc即可.

var x = 150,y = 150;
var hourHand = {
    lineWidth: 20,
    x: x,
    y: y,
    circle_r: 100,
    color: "#aaa",
    begin: -Math.PI/2,
    end: -Math.PI/2,
  },/*分针*/
  minuteHand = {
    lineWidth: 20,
    x: x,
    y: y,
    circle_r: 120,
    color: "#bbb",
    begin: -Math.PI/2,
    end: -Math.PI/2,
  },/*秒针*/
  secondHand = {
    lineWidth: 20,
    x: x,
    y: y,
    circle_r: 140,
    color: "#ccc",
    begin: -Math.PI/2,
    end: -Math.PI/2,
  };
drawCircle(config,ctx){
    ctx.strokeStyle = config.color;
    ctx.lineWidth = config.lineWidth;
    ctx.beginPath();
    ctx.arc(config.x,config.y,config.circle_r,config.begin,config.end);
    ctx.stroke();
}

然后只要

  drawCircle(secondHand,ctx);
  drawCircle(minuteHand,ctx);
  drawCircle(hourHand,ctx);

然后就可以了,我们就会看到...恩,什么都看不到先,因为config.end我们设置了-Math.PI/2
所以我们的圆弧并不会显示出来,但是先不急,我们先理一下drawCircle里面干了啥

drawCircle(config,ctx)

我们传入了画画必须要的渲染上下文ctx,圆弧配置文件config.
然后我们根据配置文件中的属性进行了绘画的设置.

ctx.strokeStyle 用于描述画笔颜色或样式的属性,其实就是画出来的弧是啥样子的

https://developer.mozilla.org...

ctx.lineWidth 用于设置画笔粗细或者说线段厚度的属性,默认为1.0.

https://developer.mozilla.org...
!注意,设置的半径 - lineWidth/2 = 圆心到达弧的距离

ctx.beginPath() 创建新路径时调用该方法,等于准备好画笔的意思,更专业的解释如下(清除上次路径,新建路径)

https://developer.mozilla.org...

ctx.arc() 想好要怎么画啦!(绘制路径)

https://developer.mozilla.org...

ctx.stroke() 按照想好的画出来!(根据设置样式填充路径)

https://developer.mozilla.org...
好的,这就是我们的drawCircle所做的事了,这样我们就可以知道这就是所谓一帧的状态了.

接下来我们要用肉眼见证下了!还记得被我们遗忘在墙角的Date()吗?用到它的时候到了!
一个圆是2*Math.PI
我们把它分成60份,一份就等于Math.PI/30
分成12份的话,一份就等于Math.PI/6
然后传入到我们的设置文件中

secondHand.end += now.getSeconds() * Math.PI/30;
minuteHand.end += now.getMinutes() * Math.PI/30;
hourHand.end += (now.getHours()%12) * Math.PI/6;

再进行绘制

 drawCircle(secondHand,ctx);
 drawCircle(minuteHand,ctx);
 drawCircle(hourHand,ctx);

然后我们就可以看到目前我们的时间是怎么样一个图形啦.

接下来就是要让它动起来了!我们就要用到requestAnimationFrame来进行动画的绘制咯.
关于这个函数,我想张大大的文章和mdn的文档解释已经十分详细啦
CSS3动画那么强，requestAnimationFrame还有毛线用？
MDN window.requestAnimationFrame
首先我们知道它是保持着1秒60帧的速度的,那么每1/60秒,三个圆弧分别会增加
秒:2*Math.PI/(60*60)
分:秒/60
时:分/12

那就愉快的:

var s=Math.PI/1800,m = s/60,h = m/12;

在设置函数step()为一帧发生的事

/*时钟动画函数*/
function HandRotate(secconfig,minconfig,houreconfig,ctx){
  var s = Math.PI/1800,m=s/60,h=m/12;
  var rotate = requestAnimationFrame(step);
  function step(){
    secconfig.end+=s;
    if(secconfig.end >= 3*Math.PI/2){
      secconfig.end = -Math.PI/2;
    }
    minconfig.end+=m;
    if(minconfig.end >= 3*Math.PI/2){
      secconfig.end = -Math.PI/2;
    }
    houreconfig.end+=h;
    if(houreconfig.end >= 3*Math.PI/2){
      houreconfig.end = -Math.PI/2;
    }
    ctx.clearRect(0,0,x*2,y*2);
    drawCircle(secconfig,ctx);
    drawCircle(minconfig,ctx);
    drawCircle(houreconfig,ctx);
    requestAnimationFrame(step);
  }
}

每次绘制后都清除画布来进行下一帧的绘制

ctx.clearRect(x,y,width,height)清除x,y点开始width宽,height高的矩形面积的区域图像.

到这里我们主要的任务也算是完成啦!
后面为圆环添加颜色也好,还是添加文字也好,都是可以自由发挥啦~
不顾我的配色真的是惨不忍睹....

这次算是浅尝辄止的一次canvas应用吧,加入有什么地方可以更改一下的,希望各位码友能指导一下