canvas实现钟表 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #clock{
 8             background: aqua;
 9         }
10     </style>
11 </head>
12 <body>
13 <canvas id="clock" width="500" height="500"></canvas>
14 <script src="main.js"></script>
15 </body>
16 </html>
  1 /**
  2  * Created by Administrator on 2016/10/14.
  3  */
  4 (function () {
  5 
  6     var clock = document.querySelector("#clock");
  7     var con = clock.getContext("2d");
  8 
  9     //清理画布
 10     function clearCanvas() {
 11         con.clearRect(0, 0, 500, 500);
 12     }
 13 
 14     // 绘制表盘
 15     function drawClockDial() {
 16         con.save();
 17         con.beginPath();
 18         con.fillStyle = "coral";
 19         con.arc(250, 250, 200, 0, 2 * Math.PI);
 20         con.fill();
 21         var grad = con.createLinearGradient(0, 0, 0, 140);
 22         grad.addColorStop(1, 'rgb(192, 80, 77)');
 23         grad.addColorStop(0.5, 'rgb(155, 187, 89)');
 24         grad.addColorStop(0, 'rgb(128, 100, 162)');
 25         con.lineWidth = 6;
 26         con.strokeStyle = grad;
 27         con.stroke();
 28         con.closePath();
 29         con.restore();
 30 
 31         for (var i = 0; i < 12; i++) {
 32 
 33             var x = 180 * Math.sin(i * 30 * Math.PI / 180);
 34             var y = 180 * -Math.cos(i * 30 * Math.PI / 180);
 35             con.save();
 36             con.translate(240, 270);
 37             con.font = "50px 宋体";
 38             con.fillText(i.toString(), x, y);
 39             con.restore();
 40 
 41         }
 42     }
 43 
 44 
 45     //绘制针
 46     function drawHand() {
 47         clearCanvas();
 48         drawClockDial();
 49 
 50         var time = new Date();
 51         var hour = parseInt(time.getHours());
 52         var min = parseInt(time.getMinutes());
 53         var sec = parseInt(time.getSeconds());
 54 
 55 
 56         //时针
 57         con.save();
 58         con.lineWidth = 5;
 59         con.strokeStyle = "green";
 60         con.translate(250, 250);
 61         con.rotate((hour * 30 + min / 60) * Math.PI / 180);
 62         con.beginPath();
 63         con.moveTo(0, -100);
 64         con.lineTo(0, 0);
 65         con.lineCap = "round";
 66         con.stroke();
 67         con.closePath();
 68         con.restore();
 69 
 70         // 分针
 71         con.save();
 72         con.lineWidth = 5;
 73         con.strokeStyle = "blue";
 74         con.translate(250, 250);
 75         con.rotate((min * 6 + sec / 60) * Math.PI / 180);
 76         con.beginPath();
 77         con.moveTo(0, -130);
 78         con.lineTo(0, 0);
 79         con.lineCap = "round";
 80         con.stroke();
 81         con.closePath();
 82         con.restore();
 83 
 84         //秒针
 85         con.save();
 86         con.lineWidth = 5;
 87         con.strokeStyle = "red";
 88         con.translate(250, 250);
 89         con.rotate(sec * 6 * Math.PI / 180);
 90         con.beginPath();
 91         con.moveTo(0, -150);
 92         con.lineTo(0, 0);
 93         con.lineCap = "round";
 94         con.stroke();
 95         con.closePath();
 96         con.restore();
 97 
 98 
 99         //表心
100         con.save();
101         con.beginPath();
102         con.arc(250, 250, 5, 0, 2 * Math.PI);
103         con.closePath();
104         con.lineWidth = 3;
105         con.stroke();
106         con.restore();
107 
108         requestAnimationFrame(drawHand);
109     }
110 
111 
112     function init() {
113         drawHand();
114     }
115 
116     init();
117 })();

效果图：

posted @ 2016-10-14 17:56  晨落梦公子  阅读(187)  评论(0)  编辑  收藏  举报