渣渣成品图：http://codepen.io/thewindswor...最近对圈子有种特别的感觉...因为写了个cricle_process_bar好像拿来当时钟会更有趣，所以我我才开始写这样的东西。代码中可能有相当多的错误和遗漏。接下来分享一下如何开发圆形时钟吧~_~使用：Jadecanvas这次没有使用div+css的方式实现圆形。戒指，因为想做多层嵌套的戒指，我觉得用canvas比较方便。然后我去了解画布。首先是HTML结构canvas#myCircleClock(width="300",height="300")=当然如果兼容的话考虑到，我们可以在canvas标签中加入提示语句您的浏览器应该升级接下来，为了让我们看到画布区域更直观，我们可以给它添加样式。#myCircleClock{border:1pxdashed#ccc;}好了，这样我们就可以看到画布的边缘清晰显示了。然后我们开始编写我们的主要代码。如果你不了解canvas，下面有一个直通车https://developer.mozilla.org。..首先，我们需要3个环嵌套在一起，分别代表hourhour,minuteminute,secondsecond。然后他们需要随着时间的推移自动填入进度，也就是重绘。如果需要时间，自然是varnow=newDate()现在先获取时间getHours()现在获取小时数getMinutes()现在获取分钟数getSeconds()获取秒数我们来做画布绘画的前提首先varcanvas=document.getElementById('myCircleClock');varctx=canvas.getContext('2d');这样我们就得到了渲染上下文ctx。那么我们必须要画一个圆，你需要使用ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise)其中anticlockwise是一个布尔值。如果为真，它将逆时针绘制。默认为false，即顺时针方向。可以看到原来我们不需要使用这个属性来制作顺时针时钟。接下来，x和y表示圆心的坐标。半径就是半径。startAngle是圆弧的起点，单位是弧度，即Math.PI/360，endAngle也是圆弧的终点。在使用之前，我们先看一张图，可以清楚的看到我们需要的起点是-Math.PI/2，终点是3*Math.PI/2。我们需要3个戒指。画的很简单，就是弧度3次。变量x=150，y=150；varhourHand={lineWidth:20,x:x,y:y,circle_r:100,color:"#aaa",begin:-Math.PI/2,end:-Math.PI/2,},/*分钟hand*/minuteHand={lineWidth:20,x:x,y:y,circle_r:120,color:"#bbb",开始:-Math.PI/2,结束:-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);然后就ok了，我们看看...嗯，我们先看不到什么，因为config.end我们设置了-Math.PI/2所以我们的弧线不会显示出来，不过别着急，我们先看一个看看drawCircle配置文件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);然后我们就可以看到我们的时间是什么样的图形了。下一步是让它动起来！我们将使用Go到requestAnimationFrame来绘制动画。关于这个功能，我觉得张大的文章和mdn的文档解释的很详细。CSS3动画这么强，requestAnimationFrame还用来薅羊毛？MDNwindow.requestAnimationFrame首先我们知道它保持每秒60帧的速度，那么每过1/60秒，三个圆弧会增加秒数：2*Math.PI/(60*60)分：秒/60小时：分钟/12然后快乐：vars=Math.PI/1800,m=s/60,h=m/12;将函数step()设置为一帧中发生的事情/*时钟动画函数*/functionHandRotate(secconfig,minconfig,houreconfig,ctx){vars=Math.PI/1800,m=s/60,h=m/12;varrotate=requestAnimationFrame(step);函数步骤(){secconfig.end+=s;如果（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;}hourconfig.end+=h;if(houreconfig.end>=3*Math.PI/2){hourconfig.end=-Math.PI/2;}ctx.clearRect(0,0,x*2,y*2);drawCircle（secconfig，ctx）；drawCircle（minconfig，ctx）；画圆（小时配置，CTX);requestAnimationFrame（步骤）；}}每次绘制后清空画布，绘制下一帧区域的图像。到这里我们的主要任务就完成了！不管是给戒指加颜色还是加文字，都可以玩的很自如~不管我的配色，真的是惨不忍睹....这次只是尝尝canvas的应用。有没有可以改的地方？我希望你能给我一些指导。
