canvas简单时钟 

  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>

 

posted @ 2013-11-08 09:26  梦飞无颜  阅读(230)  评论(0)  编辑  收藏  举报