canvas学习笔记--简单时钟

1.HTML

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <title>JavaScript-canvas时钟</title>
 6     <meta charset='utf-8' />
 7     <link rel="stylesheet" type="text/css" href="clock.css">
 8     <script type="text/javascript" src='clock.js'></script>
 9 </head>
10 
11 <body>
12     <canvas id="canvas" widht="300" height="300" style="background-color:black">clock</canvas>
13 </body>
14 
15 </html>

2.js代码

  1 function addLoadEvent(func) {
  2     var oldonload = window.onload;
  3     if (typeof window.onload != 'function') {
  4         window.onload = func;
  5     } else {
  6         window.onload = function() {
  7             oldonload();
  8             func();
  9         }
 10     };
 11 }
 12 addLoadEvent(clock);
 13 
 14 function clock() {
 15     var canvas = document.querySelector('canvas');
 16     // 检测浏览器是否支持canvas元素
 17     if (canvas.getContext) {
 18         var context = canvas.getContext('2d');
 19 
 20         // 清空画布
 21         context.clearRect(0, 0, canvas.width, canvas.height);
 22 
 23         // 表盘
 24         context.strokeStyle = "#00FFFF";
 25         context.lineWidth = 6;
 26         context.beginPath();
 27         context.arc(150, 150, 140, 0, 2 * Math.PI, false);
 28         context.stroke();
 29         context.closePath();
 30 
 31         // 时钟刻度
 32         for (var i = 0; i < 12; i++) {
 33             // 设置并保存当前状态
 34             context.strokeStyle = "#FFFF00";
 35             context.lineWidth = 4;
 36             context.save();
 37             // 变换原点
 38             context.translate(150, 150);
 39             // 旋转角度(12小时,每小时30度)
 40             context.rotate(30 * i * Math.PI / 180);
 41             // 开始绘制
 42             context.beginPath();
 43             context.moveTo(0, -137);
 44             context.lineTo(0, -120);
 45             context.stroke();
 46             context.closePath();
 47             // 恢复原来的状态
 48             context.restore();
 49         };
 50 
 51         // 分钟刻度
 52         for (var i = 0; i < 60; i++) {
 53             context.strokeStyle = "#FFFF00";
 54             context.lineWidth = 2;
 55             context.save();
 56             context.translate(150, 150);
 57             // 旋转角度(60分钟,每分钟6度)
 58             context.rotate(6 * i * Math.PI / 180);
 59             context.beginPath();
 60             context.moveTo(0, -137);
 61             context.lineTo(0, -127);
 62             context.stroke();
 63             context.closePath();
 64             context.restore();
 65         };
 66 
 67         // 根据当前时间绘制时针、分针、秒针
 68         var now = new Date();
 69         var sec = now.getSeconds();
 70         var min = now.getMinutes();
 71         var hour = now.getHours();
 72         hour > 12 ? hour - 12 : hour;
 73         hour += (min / 60);
 74         min += (sec / 60);
 75 
 76         //-----------------------------时针-----------------------------
 77         context.save();
 78         context.lineWidth = 5;
 79         context.strokeStyle = "#00FFFF";
 80         context.translate(150, 150);
 81         context.rotate(hour * 30 * Math.PI / 180); //每小时旋转30度
 82         context.beginPath();
 83         context.moveTo(0, -70);
 84         context.lineTo(0, 10);
 85         context.stroke();
 86         context.closePath();
 87         // 这里一定要返回上一级,恢复之前的状态
 88         context.restore();
 89 
 90         //-----------------------------分针-----------------------------
 91         context.save();
 92         context.lineWidth = 3;
 93         context.strokeStyle = "#FFFF00";
 94         context.translate(150, 150);
 95         context.rotate(min * 6 * Math.PI / 180); //每分钟旋转6度
 96         context.beginPath();
 97         context.moveTo(0, -100);
 98         context.lineTo(0, 10);
 99         context.stroke();
100         context.closePath();
101         // 这里一定要返回上一级,恢复之前的状态
102         context.restore();
103 
104         //-----------------------------秒针-----------------------------
105         context.save();
106         context.lineWidth = 2;
107         context.strokeStyle = "#FF0000";
108         context.translate(150, 150);
109         context.rotate(sec * 6 * Math.PI / 180); //每秒旋转6度
110         context.beginPath();
111         context.moveTo(0, -120);
112         context.lineTo(0, 10);
113         context.stroke();
114         context.closePath();
115         // 这里一定要返回上一级,恢复之前的状态
116         context.restore();
117 
118         // 电子时钟
119         hour = now.getHours();
120         min = now.getMinutes();
121         if (hour >= 10) {
122             hour = hour;
123         } else {
124             hour = "0" + hour;
125         };
126         if (min >= 10) {
127             min = min;
128         } else {
129             min = "0" + min;
130         };
131         if (sec >= 10) {
132             sec = sec;
133         } else {
134             sec = "0" + sec;
135         };
136         context.font = "18px 微软雅黑";
137         context.lineWidth = 2;
138         context.fillStyle = "#0000FF";
139         context.textAlign = "center";
140         context.textBaseline = "middle";
141         context.fillText(hour + ":" + min + ":" + sec, 150, 250);
142     };
143     setTimeout(clock, 1000);
144 }