JavaScript画时钟

话不多说，直接上源码

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5     <title></title>
  6     <meta charset="utf-8" />
  7     <style type="text/css">
  8         div {
  9             text-align: center;
 10             margin-top: 50px;
 11         }
 12     </style>
 13 </head>
 14 <body>
 15     <div>
 16         <canvas id="clock" height="500" width="500"></canvas>
 17     </div>
 18     <script type="text/javascript">
 19         var dom = document.getElementById('clock');
 20         var ctx = dom.getContext('2d');
 21         var width = ctx.canvas.width;
 22         var height = ctx.canvas.height;
 23         var r = width / 2;
 24         var rem=width/200;
 25         //画背景
 26         function drawBackground() {
 27             ctx.save();
 28             ctx.translate(r, r);
 29             ctx.beginPath();
 30             ctx.lineWidth = 10*rem;
 31             ctx.arc(0, 0, r - ctx.lineWidth/2, 0, 2 * Math.PI, false);
 32             ctx.stroke();
 33             var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
 34             ctx.font = 18*rem+'px Arial';
 35             ctx.textAlign = "center";
 36             ctx.textBaseline = "middle";
 37             hourNumbers.forEach(function (number, i) {
 38                 var rad = 2 * Math.PI / 12 * i;
 39                 var x = Math.cos(rad) * (r - 30 * rem);
 40                 var y = Math.sin(rad) * (r - 30 * rem);
 41                 ctx.fillText(number, x, y);
 42             });
 43             for (var i = 0; i < 60; i++) {
 44                 var rad = 2 * Math.PI / 60 * i;
 45                 var x = Math.cos(rad) * (r - 18 * rem);
 46                 var y = Math.sin(rad) * (r - 18 * rem);
 47                 ctx.beginPath();
 48                 if (i % 5 == 0) {
 49                     ctx.fillStyle = '#000'
 50                 } else
 51                     ctx.fillStyle = '#ccc'
 52                 ctx.arc(x, y, 2 * rem, 0, 2 * Math.PI, false);
 53                 ctx.fill();
 54             }
 55         }
 56         //画时针
 57         function drawHour(hour, Minute) {
 58             ctx.save();
 59             ctx.beginPath();
 60             var rad = 2 * Math.PI / 12 * hour;
 61             var mrad = 2 * Math.PI / 12 / 60 * Minute;
 62             ctx.rotate(rad + mrad);
 63             ctx.lineCap = 'rund';
 64             ctx.moveTo(0, 10 * rem);
 65             ctx.lineWidth = 3 * rem;
 66             ctx.fillStyle = '#5406F3';
 67             ctx.lineTo(0, -r + 45 * rem);
 68             ctx.stroke();
 69             ctx.restore();
 70         }
 71         //画分针
 72         function drawMinute(Minute, Second) {
 73             ctx.save();
 74             ctx.beginPath();
 75             ctx.fillStyle = "#5406F3";
 76             var rad = 2 * Math.PI / 60 * Minute;
 77             var mrad = 2 * Math.PI / 3600 * Second;
 78             ctx.rotate(rad + mrad);
 79             ctx.lineCap = 'rund';
 80             ctx.moveTo(0, 10 * rem);
 81             ctx.lineWidth = 2 * rem;
 82             ctx.lineTo(0, -r + 25 * rem);
 83             ctx.stroke();
 84             ctx.restore();
 85         }
 86         //画秒针
 87         function drawSecond(Second) {
 88             ctx.save();
 89             ctx.beginPath();
 90             ctx.fillStyle = '#c14543';
 91             var rad = 2 * Math.PI / 60 * Second;
 92             ctx.rotate(rad);
 93             ctx.lineWidth = 1;
 94             ctx.moveTo(-2, 0 * rem);
 95             ctx.lineTo(2, 0 * rem);
 96             ctx.lineTo(1, -r + 18 * rem);
 97             ctx.lineTo(-1, -r + 18 * rem);
 98 
 99             ctx.fill();
100             ctx.restore();
101         }
102         //画中间圆点
103         function drawDot() {
104             ctx.beginPath();
105             ctx.fillStyle = '#fff';
106             ctx.arc(0, 0, 3 * rem, 0, 2 * Math.PI, false);
107             ctx.fill();
108         }
109 
110         setInterval(draw, 1000);
111         function draw() {
112             ctx.clearRect(0, 0, width, height);
113             var now = new Date();
114             var hour = now.getHours();
115             var minute = now.getMinutes();
116             var second = now.getSeconds();
117             drawBackground();
118             drawHour(hour, minute);
119             drawMinute(minute, second);
120             drawSecond(second);
121             drawDot();
122             ctx.restore();
123         }
124 
125     </script>
126 </body>
127 </html>
View Code

 效果图：

posted @ 2016-10-06 14:40  罗曼蒂克'  阅读(108)  评论(0)  编辑  收藏  举报