首先上个效果图
看了大家的评论，这次一定要来一个完整优化版的了。（没有看过上一篇文章的亲爱的们，可以回去看一下哦）
首先对于大家提出的时针和分针要走的准确一点，每一个小时的跨度要慢慢的移动，而不是直接跳过5个刻度
时针的完善：
这里首先时针的话是每一个小时走5个刻度线，也就是30度，那么分钟走一圈，时针走30度，就要把这30度均匀的分成60等份。随着分钟的增加均匀的走动。所以时钟的绘制应该是context.rotate(m*Math.PI/360 + h*30*Math.PI/180); 原本的度数再加上分钟已经走过的。
分针的完善：
分针每50秒走一个刻度线，那么就将这一刻度再均匀的分成60等份，秒钟走一刻度，分钟就走六十分之一刻度。也就是s*(6*Math.PI/180)/60。再加上分钟自己的度数简化一下：ctx.rotate(s*Math.PI/1800 + m*6*Math.PI/180);
下面来瞅一眼部分js代码
//时针
context.save();
context.beginPath();
context.translate(250, 250);
context.rotate(m*Math.PI/360 + h*30*Math.PI/180);
context.lineWidth=10;
context.lineCap="round";
context.strokeStyle="green";
context.moveTo(0, 0);
context.lineTo(0,-100);
context.stroke();
context.restore();
//分针
context.save();
context.beginPath();
context.translate(250, 250);
// 自己的度数+秒针走过的度数
// 秒针走过的度数：s*Math.PI/1800
context.rotate(s*Math.PI/1800+m*6*Math.PI/180);
context.strokeStyle="pink";
context.lineWidth=7;
context.lineCap="round";
context.moveTo(0, 0);
context.lineTo(0,-120);
context.stroke();
context.restore();
//秒针
context.save();
context.beginPath();
context.translate(250, 250);
context.rotate(s*6*Math.PI/180);
context.strokeStyle="yellow";
context.lineWidth=4;
context.lineCap="round";
context.moveTo(0, 0);
context.lineTo(150,0);
context.stroke();
context.restore();
如果还没有懂的话可以加Q群（295383988），来获取源码哦。
