canvas模拟时钟 

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>画布时钟</title>
  6         <style>
  7             *{margin:0;padding: 0;}
  8             canvas{margin:50px auto;border:1px solid #ccc;display: block;}
  9         </style>
 10     </head>
 11     <body>
 12         <canvas id="cvs" height="400" width="400"></canvas>
 13         <script>
 14             var cvs=document.getElementById("cvs")
 15             var ctx=cvs.getContext("2d");
 16             ctx.beginPath();
 17             ctx.arc(200,200,190,0,2*Math.PI,false);
 18             ctx.strokeStyle="red";
 19             ctx.lineWidth=4;
 20             ctx.stroke();
 21             ctx.clip();
 22             var image=new Image();
 23             image.src="img/01.jpg";
 24             image.onload=function(){
 25 //                ctx.drawImage(image,0,0)
 26                 //创建分针指针
 27             function move(){
 28                 ctx.clearRect(0,0,400,400)
 29                 ctx.drawImage(image,0,0)
 30                 //fenzhen
 31                 for(var j=0;j<60;j++){
 32                     ctx.save();
 33                     ctx.linewidth=4;
 34                     ctx.translate(200,200);
 35                     ctx.rotate(6*j*Math.PI/180);
 36                     ctx.beginPath();
 37                     ctx.moveTo(0,180);
 38                     ctx.lineTo(0,190);
 39                     ctx.closePath();
 40                     ctx.restore();
 41                     ctx.strokeStyle="blue";
 42                     ctx.stroke();
 43                 }
 44                 //创建时针指针
 45                 for(var i=0;i<12;i++){
 46                     ctx.save();
 47                     ctx.lineWidth=6;
 48                     ctx.translate(200,200)
 49                     ctx.rotate(30*i*Math.PI/180)
 50                     ctx.beginPath();
 51                     ctx.moveTo(0,170);
 52                     ctx.lineTo(0,190);
 53                     ctx.closePath();
 54                     ctx.restore();
 55                     ctx.strokeStyle="red";
 56                     ctx.stroke();
 57                 }
 58                 //画时针  x向右为正方向；y向下为正方向
 59                  var nowDate=new Date();  
 60                     var hour=nowDate.getHours();  
 61                     var min=nowDate.getMinutes();  
 62                     var sec=nowDate.getSeconds();  
 63                     hour=hour>12?hour-12:hour; 
 64                     hour=hour+(min/60);
 65                     min=min+(sec/60)
 66                     ctx.save();
 67                     ctx.lineWidth=10;
 68                     ctx.strokeStyle="pink";
 69                     ctx.translate(200,200);
 70                     ctx.rotate(hour*30*Math.PI/180);
 71                     ctx.beginPath();
 72                     ctx.moveTo(0,-120);
 73                     ctx.lineTo(0,10);
 74                     ctx.closePath();
 75                     ctx.stroke();
 76                     ctx.restore();
 77                 //画分针
 78                     ctx.save();
 79                     ctx.linewidth=8;
 80                     ctx.strokeStyle="yellow";
 81                     ctx.translate(200,200);
 82                     ctx.rotate(min*6*Math.PI/180);
 83                     ctx.beginPath();
 84                     ctx.moveTo(0,-140);
 85                     ctx.lineTo(0,10);
 86                     ctx.closePath();
 87                     ctx.stroke();
 88                     ctx.restore();
 89                 //画秒针
 90                     ctx.save();
 91                     ctx.linewidth=6;
 92                     ctx.strokeStyle="blue";
 93                     ctx.translate(200,200);
 94                     ctx.rotate(sec*6*Math.PI/180);
 95                     ctx.beginPath();
 96                     ctx.moveTo(0,-160);
 97                     ctx.lineTo(0,10);
 98                     ctx.closePath();
 99                     ctx.stroke();
100                     ctx.restore();
101             }    
102                 move();
103                 setInterval(move,1000)
104             }
105             
106         </script>
107     </body>
108 </html>

 

posted on 2016-10-08 20:30  任毅  阅读(192)  评论(0)    收藏  举报