canvas畫鐘錶
阿新 • • 發佈：2018-11-03
運用canvas，js知識，畫鐘錶
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> canvas{ border:1px solid red; } </style> </head> <body> <canvas id="canvas" width="500" height="500"></canvas> <script> var canvas=document.getElementById('canvas'); var ctx=canvas.getContext('2d') draw() function draw() { ctx.clearRect(0,0,canvas.width,canvas.height) // 畫圓 ctx.beginPath(); ctx.arc(250,250,200,0,2*Math.PI,true); ctx.clip() ctx.closePath(); ctx.strokeStyle='black'; ctx.stroke() ctx.globalCompositeOperation="destination-over"; // 圖片 var img=new Image(); img.src='img/test.png'; img.onload=function () { ctx.drawImage(img,-50,-50,600,600) } ctx.clip(); // 時針刻度 for (var i=0;i<12;i++){ ctx.save(); ctx.translate(250,250); ctx.rotate(i*30*Math.PI/180) ctx.beginPath(); ctx.moveTo(0,-190); ctx.lineTo(0,-170); ctx.closePath(); ctx.stroke() ctx.restore() } for (var i=0;i<60;i++){ ctx.save(); ctx.translate(250,250); ctx.rotate(i*6*Math.PI/180) ctx.beginPath(); ctx.moveTo(0,-190); ctx.lineTo(0,-180); ctx.closePath(); ctx.stroke() ctx.restore() } // 交叉點 ctx.save(); ctx.translate(250,250); ctx.beginPath(); ctx.arc(0,0,5,0,2*Math.PI,true) ctx.closePath(); ctx.strokeStyle='black'; ctx.stroke() ctx.fillStyle='#fff'; ctx.fill(); ctx.restore() var dt=new Date(); var h=dt.getHours(); var m=dt.getMinutes(); var s=dt.getSeconds(); h=h+m/60; h=h>12?h-12:h; // 時針 ctx.save(); ctx.translate(250,250); ctx.rotate(h*30*Math.PI/180) ctx.beginPath(); ctx.moveTo(0,20); ctx.lineTo(0,-100) ctx.closePath(); ctx.strokeStyle='red'; ctx.stroke() ctx.restore() // 分針 ctx.save(); ctx.translate(250,250); ctx.rotate(m*6*Math.PI/180) ctx.beginPath(); ctx.moveTo(0,20); ctx.lineTo(0,-120) ctx.closePath(); ctx.strokeStyle='black'; ctx.stroke() ctx.restore() //秒針 ctx.save(); ctx.translate(250,250); ctx.rotate(s*6*Math.PI/180) ctx.beginPath(); ctx.moveTo(0,20); ctx.lineTo(0,-140) ctx.closePath(); ctx.strokeStyle='black'; ctx.stroke() ctx.restore(); // 重新定義時間 var hour=dt.getHours(); var min=dt.getMinutes(); var sco=dt.getSeconds(); var h1=hour>9?hour:("0"+hour); var m1=min>9?min:("0"+min); var s1=sco>9?sco:("0"+sco); ctx.save(); ctx.beginPath(); ctx.font='20px 微軟雅黑'; ctx.fillText(h1+':'+m1+':'+s1,200,300); ctx.fill(); ctx.closePath(); ctx.restore() ctx.save(); ctx.translate(250,250); ctx.beginPath(); for (var i=1;i<13;i++){ var x=Math.sin(i*30*Math.PI/180); var y=-Math.cos(i*30*Math.PI/180); ctx.fillStyle="#000"; ctx.font="bold 20px Calibri"; ctx.textAlign='center'; ctx.textBaseline='middle'; ctx.fillText(i,x*150,y*150); } ctx.closePath() ctx.restore(); } setInterval(draw,1000) </script> </body> </html>
注意：在繪製時針、分針、秒針的時候，每一個旋轉的角度是不同的：時針：ctx.rotate(hours*30*Math.PI/180); 分針：ctx.rotate(minutes*6*Math.PI/180);