1、绘制时钟圆盘
绘制时钟圆盘，实在便是绘制一个圆，这个比较大略，代码如下：
2、标绘刻度
标绘刻度的难点在于确定刻度点的位置，这须要用到一些的几何知识，圆弧和三角函数。
如上图，哀求圆上任意一点A的位置，通过三角函数可以推出：
x1=BC=cos(a)AC
y1=BC=sin(a)AC
个中AC便是半径，是已知的
现在我们要来确定角a的度数：
小时候度：12个刻度，每一小时的角度为：360/12，弧度为：2π/12
分钟刻度：60个刻度，每一分钟的角度为：360/60，弧度为：2π/60
有了半径和角度我们就可以算出坐标，这样就可以绘制刻度了。把稳js里面用的是弧度。
为了方便，我们用ctx.translate()把画布原点重定向到了圆心，这改变了画布的状态，为了不影响后续的绘制，每次绘完之后都要把画布规复为原来的状态，详细操作便是：重定向画布原点之前，用ctx.save()保存画布状态，绘制完成之后，用ctx.restore()规复之前保存的画布状态。
//保存画布当前环境状态ctx.save();//重定向画布原点ctx.translate(250,250);//绘制代码......//规复之前保存的状态ctx.restore();
绘制小时候度代码
同理，绘制分钟刻度就大略，把12换成60就可以了。
绘制分钟刻度代码
3、画时针
时针、分针、秒针都是和当前韶光有关，以是先要获取当前韶光的小时数、分钟数、秒数。
//得到当前韶光var now=new Date();//当前小时数var hour=now.getHours();//当前分钟数var minute=now.getMinutes();//当前秒数var second=now.getSeconds();hour=hour+minute/60;
画时针时，我们先画出指向12点的时针：
//指向12点的时针ctx.beginPath();ctx.lineWidth=8;ctx.lineCap=\公众round\"大众;ctx.moveTo(0,10);ctx.lineTo(0,-120);ctx.stroke()
之后每一个时候度点的时针便是把指向12点的时针旋转一定的度数：
//旋转度数ctx.rotate(hour2Math.PI/12);
绘制时针代码
同理，时针绘制好之后，分针和秒针也就大略，直接看代码。
绘制分针代码
绘制秒针代码
为了好看我们再画一个中央点。
绘制中央点代码
末了，为了让时钟实时迁徙改变，须要加一个定时任务，每秒实行一次。
//一秒钟实行一次setInterval(clock,1000);
还要把稳，每次重绘都要打消画布：
ctx.clearRect(0,0,canvas.width,canvas.height);
终极完全的代码逻辑如下：
这样一个时钟就完成了，如果想看更详细的操作，推举不雅观看视频版。
