来一个完整优化版的走动的时针（canvas绘制）

陆家嘴种菜 2017-02-27 21:46

首先上个效果图

看了大家的评论，这次一定要来一个完整优化版的了。（没有看过上一篇文章的亲爱的们，可以回去看一下哦）

首先对于大家提出的时针和分针要走的准确一点，每一个小时的跨度要慢慢的移动，而不是直接跳过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），来获取源码哦。