canvas运用时钟制作

html:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style type="text/css">
 7         * {
 8             margin: 0px;
 9             padding: 0px;
10         }
11 
12         #header {
13             height: 69px;
14             width: 1170px;
15             margin: 0px auto;
16             padding: 15px 10px;
17             border: 1px solid gray;
18         }
19 
20         #center {
21             width: 1170px;
22             margin: 0px auto;
23             padding: 15px 10px;
24             border: 1px solid blue;
25         }
26 
27         #footer {
28             width: 1170px;
29             margin: 0px auto;
30             padding: 15px 10px;
31             border: 1px dashed;
32         }
33 
34         .clock {
35             width: 400px;
36             height: 400px;
37             margin: 20px auto;
38             padding: 0px;
39             border: 1px dashed;
40         }
41     </style>
42 </head>
43 <body>
44 <div id="header">
45     <h3>make a colok!!</h3>
46 </div>
47 <div id="center">
48     <div class="clock">
49         <canvas id="drawing" width="400px" height="400px"></canvas>
50     </div>
51 </div>
52 <div id="footer">
53     <div>end message:.....</div>
54 </div>
55 
56 <script src="clockme.js"></script>
57 <script type="text/javascript">
58   var draw=  new Canvas("drawing");
59   draw.drawClock();
60 </script>
61 </body>
62 </html>

js:

 1 (function (window) {
 2     function Canvas(ctx) {
 3         if (typeof ctx == "string") {
 4             var drawing = document.getElementById(ctx);
 5         } else if (ctx instanceof HTMLCanvasElement) {
 6             var drawing = ctx;
 7         }
 8         drawing && this.init(drawing);
 9     }
10 
11     Canvas.prototype = {
12         init: function (drawing) {
13             if (drawing.getContext) {
14                 this.$attrs = {
15                     context: drawing.getContext("2d") || null, //获取画图板
16                     width: drawing.offsetWidth || 0,//获取画板width
17                     height: drawing.offsetHeight || 0 //获取画板height
18                 }
19             }
20         },
21         drawClock: function () {
22             if (!this.$attrs) {
23                 return;
24             }
25             var context = this.$attrs.context,
26                 drawing_width = this.$attrs.width,
27                 drawing_height = this.$attrs.height;
28             var radius, dotX, dotY;//获取 半径和原点
29             dotX = drawing_width / 2;
30             dotY = drawing_height / 2;
31             if (drawing_width > drawing_height) {
32                 radius = drawing_height / 2;
33             } else {
34                 radius = drawing_width / 2;
35             }
36             context.translate(dotX, dotY); //变换原点(时钟原点)
37             context.fillStyle = "gray";
38             context.font = "bold 14px Arial";
39             context.textAlign = "center";
40             context.textBaseline = "middle";
41             function clear() {
42                 context.clearRect(-dotX, -dotY, context.canvas.width, context.canvas.height);
43             }
44 
45             function draw() {
46                 context.moveTo(radius, 0);
47                 //画圆
48                 context.beginPath();
49                 context.arc(0, 0, radius, 0, 2 * Math.PI, false);
50                 context.stroke();
51                 //填充数字
52                 var innerRadius = radius * 0.9;
53                 for (var i = 1; i <= 12; i++) {//产生数字
54                     var rad = i * Math.PI / 6 - Math.PI / 2;//当前角度
55                     context.fillText(i, innerRadius * Math.cos(rad), innerRadius * Math.sin(rad));
56                 }
57                 context.save();
58                 context.rotate(3 * Math.PI / 2);//绘制刻度
59                 for(var i=1;i<=60;i++) {
60                     context.rotate(Math.PI/30);
61                     context.moveTo(radius*0.95, 0);
62                     context.lineTo(radius, 0);
63                 }
64                 context.stroke();
65                 context.restore();
66                 var currentTime = new Date();
67                 var hour = currentTime.getHours();
68                 var minute = currentTime.getMinutes();
69                 var second = currentTime.getSeconds();
70                 var hourLen = radius * 0.5, minLen = radius * 0.7, secLen = radius * 0.9;
71                 hour > 12 ? hour -= 12 : hour;
72                 var radHour = Math.PI * hour / 6 - Math.PI / 2,
73                     radMinute = Math.PI * minute / 30 - Math.PI / 2;
74                 radHour = radHour + Math.PI / 6 * minute / 60; //修正时针度数
75                 var radSecond = Math.PI * second / 30 - Math.PI / 2;
76                 //绘制时针/分针/秒针
77                 context.moveTo(0, 0);
78                 context.lineTo(hourLen * Math.cos(radHour), hourLen * Math.sin(radHour));
79                 context.moveTo(0, 0);
80                 context.lineTo(minLen * Math.cos(radMinute), minLen * Math.sin(radMinute));
81                 context.moveTo(0, 0);
82                 context.lineTo(secLen * Math.cos(radSecond), secLen * Math.sin(radSecond));
83                 context.stroke();
84             }
85 
86             function start() {
87                 setInterval(function () {
88                     clear(), draw();
89                     console.log("time is going...");
90                 }, 1000);
91             }
92             start();
93         }
94     }
95     window.Canvas = Canvas;
96 
97 })
98 (window);

 

posted @ 2016-03-15 18:21  徐徐徐徐徐徐  阅读(72)  评论(0)    收藏  举报