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 }