用canvas來實現動態時鐘
阿新 • • 發佈：2018-12-17
之前用簡單的css與js來實現動態的時鐘，發現直接用canvas也可以畫時鐘，只不過時鐘圈和指標應該要放在不同的畫布canvas中比較好，因為指標所在的畫布是要一直旋轉的，詳細程式碼如下（如有問題，望大家指出，一起進步哈！）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>時鐘(canvas)</title> </head> <body> <canvas class="ctx" width="300" height="300" style="border:1px solid red;position: absolute;top: 0;left:0;"></canvas> <canvas class="dial" width="300" height="300" style="border:1px solid red;position: absolute;top: 0;left:0;"></canvas> <script type="text/javascript"> var canvas=document.querySelector('.ctx'); var ctx=canvas.getContext('2d'); ctx.translate(150,150); //將畫布座標移到中間去 //畫圓形 ctx.beginPath(); ctx.arc(0,0,100,0,2*Math.PI,true); ctx.closePath(); ctx.strokeStyle='#FF7F24'; ctx.lineWidth=3; ctx.stroke(); //畫表盤的12個刻度 for(var i=0;i<12;i++){ ctx.save(); //儲存當前的繪圖狀態； ctx.rotate(i*Math.PI/6); //一般都是以座標(0,0)點旋轉,因此在此之前要把座標移到中間去 ctx.moveTo(0,100); //移動結束點到錶盤6點處 ctx.lineTo(0,90); //畫長度為10的刻度 ctx.stroke(); ctx.restore(); //恢復之前的繪圖狀態 }; //畫表盤每個刻度上的時刻數字,但是有個小問題，旋轉之後數字也會旋轉甚至倒立，該怎麼處理呢？？？ var Numbers=[6,7,8,9,10,11,12,1,2,3,4,5]; for(var i=0;i<Numbers.length;i++){ ctx.save(); ctx.rotate(i*Math.PI/6); ctx.font='bold 12px 宋體'; ctx.textBaseline='bottom'; ctx.fillText(Numbers[i],-3,85); ctx.restore(); } //畫時分秒針,因為時分秒要通過每隔一秒旋轉來轉動，所以要save儲存當前狀態，在restore恢復之前狀態再去畫其他的針 // //畫時針 // ctx.save() // ctx.beginPath(); // ctx.moveTo(-1,2); // ctx.lineTo(40,0); // ctx.lineTo(-1,-2); // ctx.lineTo(-1,2); // ctx.fillstyle='black'; // ctx.fill(); // ctx.closePath(); // ctx.restore(); // //畫分鐘 // ctx.save() // ctx.beginPath(); // ctx.moveTo(-1,2); // ctx.lineTo(55,0); // ctx.lineTo(-1,-2); // ctx.lineTo(-1,2); // ctx.fill(); // ctx.closePath(); // ctx.restore(); // //秒針 // ctx.save() // ctx.beginPath(); // ctx.moveTo(-2,2); // ctx.lineTo(80,0); // ctx.lineTo(-2,-2); // ctx.lineTo(-2,2); // ctx.fill(); // ctx.closePath(); // ctx.restore(); //獲得畫時分秒的畫布,對於指標和圓圈不能使用同一個canvas,使用兩個canvas效能也會提高不少 var dial=document.querySelector('.dial'); var dial_ctx=dial.getContext('2d'); dial_ctx.translate(150,150); //同樣要把座標移到中間去 //封裝一下 function Move(context){ context.clearRect(-150,-150,300,300); //先清除當前的繪圖再旋轉畫針 var nowTime=new Date(); var h=nowTime.getHours(), m=nowTime.getMinutes(), s=nowTime.getSeconds(); //畫時針 context.save(); context.beginPath(); context.rotate((2*Math.PI/12)*h+(2*Math.PI/12)*(m/60)-Math.PI/2); context.moveTo(-1,2); context.lineTo(35,0); context.lineTo(-1,-2); context.lineTo(-1,2); context.fillstyle='black'; context.fill(); context.closePath(); context.restore(); //畫分鐘 context.save(); context.beginPath(); context.rotate((2*Math.PI/60)*m-Math.PI/2); //因為座標系的問題要減去一個Π/2 context.moveTo(-1,2); context.lineTo(55,0); context.lineTo(-1,-2); context.lineTo(-1,2); context.fill(); context.closePath(); context.restore(); //秒針 context.save() context.beginPath(); context.rotate((2*Math.PI/60)*s-Math.PI/2); context.moveTo(-2,2); context.lineTo(80,0); context.lineTo(-2,-2); context.lineTo(-2,2); context.fill(); context.closePath(); context.restore(); } //通過一個計時器來實現動畫 var timer=setInterval(function(){ Move(dial_ctx); console.log('1') },1000) </script> </body> </html>