<!doctype html> <html> <head></head> <body> <canvas id="clock" width="500" height="500"> 您的瀏覽器不支持canvas標簽，無法看到時鍾 </canvas> <script> var clock=document.getElementById('clock'); var cxt=clock.getContext('2d'); function drawClock(){ cxt.clearRect(0,0,500,500); //清除畫布區域 var now =new Date(); var sec=now.getSeconds(); var min=now.getMinutes(); var hour=now.getHours(); hour=hour+min/60; //小時必須獲取浮點類型(小時+分數轉化成的小時) //問題 19:23:30 //將24小時進制轉換為12小時 hour=hour>12?hour-12:hour; cxt.lineWidth=10; cxt.strokeStyle="#A61C3E"; //表盤(藍色) cxt.beginPath(); cxt.arc(250,250,200,0,Math.PI*360,false); cxt.closePath(); cxt.stroke(); //時刻度 for(var i=0;i<12;i++){ cxt.save(); cxt.lineWidth=7; //設置時針的粗細 cxt.strokeStyle="#005693"; //設置時針的顏色 cxt.translate(250,250); cxt.rotate(i*30*Math.PI/180);//角度*Math.PI/180=弧度 cxt.beginPath(); cxt.moveTo(0,-170); cxt.lineTo(0,-190); cxt.closePath(); cxt.stroke(); cxt.restore(); } //分刻度 for(var i=0;i<60;i++){ cxt.save(); cxt.lineWidth=5; cxt.strokeStyle="#04562E"; cxt.translate(250,250); cxt.rotate(i*6*Math.PI/180); cxt.beginPath(); cxt.moveTo(0,-180); cxt.lineTo(0,-190); cxt.closePath(); cxt.stroke(); cxt.restore(); } //時針 cxt.save(); cxt.lineWidth=7; cxt.strokeStyle="#04562E"; cxt.translate(250,250);//設置異次元空間的0，0點，畫布的圓心 cxt.rotate(hour*30*Math.PI/180); cxt.beginPath(); cxt.moveTo(0,-120); //針長 cxt.lineTo(0,10); cxt.closePath(); cxt.stroke(); cxt.restore(); //分針 cxt.save(); cxt.lineWidth=5; cxt.strokeStyle="#000"; cxt.translate(250,250); cxt.rotate(min*6*Math.PI/180); cxt.beginPath(); cxt.moveTo(0,-150); cxt.lineTo(0,15); cxt.closePath(); cxt.stroke(); cxt.restore(); //秒針 cxt.save(); cxt.strokeStyle="#611123"; cxt.lineWidth=3; cxt.translate(250,250); cxt.rotate(sec*6*Math.PI/180);//設置旋轉角度 cxt.beginPath(); //畫圖 cxt.moveTo(0,-170); cxt.lineTo(0,20); cxt.closePath(); cxt.stroke(); cxt.beginPath(); //畫出時針、分針、秒針的交叉點、 cxt.arc(0,0,5,0,360,false); cxt.closePath(); cxt.fillStyle="gray"; //設置填充樣式 cxt.fill(); cxt.stroke(); //設置秒針前段的小圓點 cxt.beginPath(); cxt.arc(0,-150,5,0,360,false); cxt.closePath(); cxt.fillStyle="#FFF"; cxt.fill(); cxt.stroke();//設置筆觸樣式(秒針已設置) cxt.restore(); } drawClock(); //1000毫秒前要顯示 //使用setInterval(代碼,毫秒時間) 讓時鍾動起來 setInterval(drawClock,1000); </script> </body> </html>