用canvas畫簡易鐘錶
阿新 • • 發佈：2018-12-12
畫鐘錶前，我們需要弄清楚鐘錶的構造和各個元素間的關係
同時還要學會弧度的運用
難點還是在於對context.save()和context.restore()的理解
把思路理清，寫起來也會變得簡單
效果圖：
下面來看一下程式碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #div{ text-align: center; } #canvas{ border: 1px solid #000; } </style> </head> <body> <div id="div"> <canvas id="canvas" width="500px" height="500px"></canvas> </div> <script> var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var width=canvas.width; //獲取畫布的寬 var height=canvas.height; //獲取畫布的高 var r=width/2; //設定圓的半徑為寬的一半 functionfun(){ ctx.save() //儲存當前的狀態 ctx.beginPath(); //開啟一條路徑 ctx.translate(r,r); //將畫布原點改為（r，r） ctx.arc(0,0,r-5,0,Math.PI*2); //設定半徑為R-5的圓，因為設定了線寬為10，所以半徑減去了線寬的一半 ctx.closePath(); //閉合路徑 ctx.lineWidth=10; ctx.stroke(); // var li=[3,4,5,6,7,8,9,10,11,12,1,2] //設定一個數組儲存鐘錶的數字刻度，按照弧度的起始位置設定 for(var i=0 ;i<li.length;i++){ ctx.beginPath(); ctx.fillStyle="#000000" ctx.textBaseline="middle"; ctx.textAlign="center"; ctx.font="18px Arial"; var x=Math.cos(Math.PI*2/12*i)*(r-30); //用三角函式cos計算出數字所在的X座標 var y=Math.sin(Math.PI*2/12*i)*(r-30); //用三角函式cos計算出數字所在的X座標 ctx.fillText(""+li[i]+"",x,y); ctx.closePath(); for(var j=0 ;j<60;j++){ //畫60個圓點為分秒刻度 ctx.beginPath(); var x=Math.cos(Math.PI*2/60*j)*(r-15); var y=Math.sin(Math.PI*2/60*j)*(r-15); if(j%5==0){ ctx.fillStyle="#000000"; //給整點刻度圓點設定為黑色 }else{ ctx.fillStyle="#ccc"; //其餘設定為灰色 } ctx.arc(x,y,2,0,Math.PI*2); ctx.fill(); ctx.closePath(); } } } function drawHour(hour,minu){ //設定時針方法 ctx.save(); //儲存當前的狀態 ctx.beginPath(); ctx.lineWidth=6; var rad = Math.PI*2 / 12 * hour; var radminu = Math.PI / 360 * minu; ctx.rotate(rad + radminu) //時針的旋轉角度 ctx.moveTo(0,10); ctx.lineTo(0,-r+150); //繪製時針 ctx.lineCap="round"; //設定時針的圓角樣式，lineCap受closePath影響，兩者同時出現時，lineCap無效 ctx.stroke() ctx.restore() //返回之前儲存過的狀態 } function drawMinu(minu){ //設定分針方法 ctx.save(); //儲存當前的狀態 ctx.beginPath(); ctx.lineWidth = 4; var rad = Math.PI * 2 / 60 * minu; ctx.rotate(rad) ctx.moveTo(0,10); ctx.lineTo(0,-r+100); //繪製分針 ctx.lineCap="round"; //設定時針的圓角樣式，lineCap受closePath影響，兩者同時出現時，lineCap無效 ctx.stroke() //描邊 ctx.restore() //返回之前儲存過的狀態 } function drawmiao(miao){ ctx.save(); //儲存當前的狀態 ctx.beginPath(); ctx.lineWidth = 1; var rad = Math.PI * 2 / 60 * miao; ctx.rotate(rad) ctx.moveTo(-2,20); ctx.lineTo(2,20); ctx.lineTo(1,-r+50); ctx.lineTo(-1,-r+50); ctx.closePath() //繪製秒針 ctx.fillStyle="#f00" ctx.fill() ctx.restore() //返回之前儲存過的狀態 } function draw(){ ctx.clearRect(0,0,width,height); var datenow = new Date(); var hour = datenow.getHours(); var minu = datenow.getMinutes(); var miao = datenow.getSeconds(); fun() drawHour(hour,minu) drawMinu(minu) drawmiao(miao) //執行 ctx.restore() //返回之前儲存過的狀態 } draw() //執行 setInterval(draw,1000) //定時器，設定間隔時間為1s </script> </body> </html>
