首先上個(gè)效果圖
看了大家的評(píng)論，這次一定要來(lái)一個(gè)完整優(yōu)化版的了。（沒(méi)有看過(guò)上一篇文章的親愛(ài)的們，可以回去看一下哦）
首先對(duì)于大家提出的時(shí)針和分針要走的準(zhǔn)確一點(diǎn)，每一個(gè)小時(shí)的跨度要慢慢的移動(dòng)，而不是直接跳過(guò)5個(gè)刻度
時(shí)針的完善：
這里首先時(shí)針的話是每一個(gè)小時(shí)走5個(gè)刻度線，也就是30度，那么分鐘走一圈，時(shí)針走30度，就要把這30度均勻的分成60等份。隨著分鐘的增加均勻的走動(dòng)。所以時(shí)鐘的繪制應(yīng)該是context.rotate(m*Math.PI/360 + h*30*Math.PI/180); 原本的度數(shù)再加上分鐘已經(jīng)走過(guò)的。
分針的完善：
分針每50秒走一個(gè)刻度線，那么就將這一刻度再均勻的分成60等份，秒鐘走一刻度，分鐘就走六十分之一刻度。也就是s*(6*Math.PI/180)/60。再加上分鐘自己的度數(shù)簡(jiǎn)化一下：ctx.rotate(s*Math.PI/1800 + m*6*Math.PI/180);
下面來(lái)瞅一眼部分js代碼
//時(shí)針
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);
// 自己的度數(shù)+秒針走過(guò)的度數(shù)
// 秒針走過(guò)的度數(shù)：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();
如果還沒(méi)有懂的話可以加Q群（295383988），來(lái)獲取源碼哦。
