1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 *{ padding:0; margin:0} 8 #can{ background:#EBEBEB} 9 10 </style> 11 12 </head> 13 <body> 14 <canvas id="can" width="800" height="600"></canvas> 15 16 17 18 </body> 19 20 <script> 21 22 var canid=document.getElementById("can"); 23 var can=canid.getContext("2d"); 24 var radius=100; 25 var crad=10; 26 27 setInterval("drawB()",1000); 28 29 30 function drawB(){ 31 can.clearRect(0,0,800,600); 32 //画表盘 33 can.beginPath(); 34 can.strokeStyle="#000000"; 35 can.lineWidth="3"; 36 can.arc(300,300,radius,0,Math.PI*2,true); 37 can.stroke(); 38 //画中心园 39 can.beginPath(); 40 can.fillStyle="#000000"; 41 can.arc(300,300,5,0,Math.PI*2,true); 42 can.fill(); 43 can.stroke(); 44 45 var date=new Date; 46 var h=date.getHours()*30+(date.getMinutes()*6/12)-90; 47 var m=date.getMinutes()*6-90; 48 var s=date.getSeconds()*6-90; 49 50 //画表针 51 52 drawBz(s,80,"#cc0000",2); //秒针 53 drawBz(m,60,"#000000",3); //分针 54 drawBz(h,50,"#000000",4); //时针 55 56 57 function drawBz(ds,x,col,cx){ 58 59 60 can.beginPath(); 61 can.lineWidth=cx; 62 can.strokeStyle=col; 63 var Xtusr=Math.cos(ds*Math.PI/180)*(x)+300; 64 var Ytusr=Math.sin(ds*Math.PI/180)*(x)+300; 65 can.moveTo(300,300); 66 can.lineTo(Xtusr,Ytusr); 67 can.stroke(); 68 can.closePath(); 69 70 } 71 72 //画刻度 73 for(var i=0;i<60;i++){ 74 drawKd(i,5); 75 } 76 77 78 function drawKd(d,c){ 79 var ds=d*6*Math.PI/180; 80 if(d%5==0){ 81 c=10; 82 } 83 can.beginPath(); 84 can.lineWidth="3"; 85 can.strokeStyle="#000000"; 86 var Xtus=Math.cos(ds)*radius+300; 87 var Ytus=Math.sin(ds)*radius+300; 88 var Xtusr=Math.cos(ds)*(radius-c)+300; 89 var Ytusr=Math.sin(ds)*(radius-c)+300; 90 can.moveTo(Xtus,Ytus); 91 can.lineTo(Xtusr,Ytusr); 92 can.stroke(); 93 can.closePath(); 94 95 } 96 97 } 98 99 </script> 100 101 102 </html>