1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>clock</title> 6 </head> 7 <body> 8 <canvas id="clock" width="500" height="500" style="display:block; margin:50px auto"> 9 您的浏览器不支持canvas标签! 10 </canvas> 11 <script> 12 var clock = document.getElementById('clock'); 13 var ctx = clock.getContext('2d'); 14 function drawClock(){ 15 var today = new Date(); 16 var year = today.getFullYear(); 17 var month = today.getMonth() + 1; 18 var date = today.getDate(); 19 var day = today.getDay(); 20 var hour = today.getHours(); 21 var minute = today.getMinutes(); 22 var second = today.getSeconds(); 23 hour = hour > 12 ? hour - 12 : hour; 24 25 ctx.clearRect(0, 0, 500, 500); 26 27 ctx.fillStyle = '#fff'; 28 ctx.beginPath(); 29 ctx.arc(250, 250, 205, 0, 2*Math.PI); 30 ctx.closePath(); 31 ctx.fill(); 32 33 ctx.strokeStyle = '#ddd'; 34 ctx.lineWidth = 10; 35 ctx.beginPath(); 36 ctx.arc(250, 250, 185, 0, 2*Math.PI); 37 ctx.closePath(); 38 ctx.stroke(); 39 40 ctx.strokeStyle = '#96DFF7'; 41 ctx.lineWidth = 10; 42 ctx.beginPath(); 43 ctx.arc(250, 250, 200, 0, 2*Math.PI); 44 ctx.closePath(); 45 ctx.stroke(); 46 47 ctx.strokeStyle = '#96DFF7'; 48 ctx.lineWidth = 3; 49 ctx.beginPath(); 50 ctx.arc(250, 250, 192, 0, 2*Math.PI); 51 ctx.closePath(); 52 ctx.stroke(); 53 54 ctx.strokeStyle = '#09303C'; 55 ctx.lineWidth = 5; 56 ctx.beginPath(); 57 ctx.arc(250, 250, 205, 0, 2*Math.PI); 58 ctx.closePath(); 59 ctx.stroke(); 60 61 62 // 时刻度 63 for(var i = 0; i < 12; i++) { 64 ctx.save(); 65 ctx.lineWidth = 4; 66 ctx.strokeStyle = '#000'; 67 ctx.translate(250, 250); 68 ctx.rotate(30 * i / 180 * Math.PI); 69 ctx.beginPath(); 70 ctx.moveTo(0, 180); 71 ctx.lineTo(0, 160); 72 ctx.closePath(); 73 ctx.stroke(); 74 ctx.restore(); 75 } 76 // 分刻度 77 for(var i = 0; i < 60; i++) { 78 if(i % 5 != 0){ 79 ctx.save(); 80 ctx.lineWidth = 2; 81 ctx.strokeStyle = '#000'; 82 ctx.translate(250, 250); 83 ctx.rotate(6 * i / 180 * Math.PI); 84 ctx.beginPath(); 85 ctx.moveTo(0, 175); 86 ctx.lineTo(0, 170); 87 ctx.closePath(); 88 ctx.stroke(); 89 ctx.restore(); 90 } 91 } 92 93 // 秒针 94 ctx.save(); 95 ctx.lineWidth = 2; 96 ctx.strokeStyle = "#f00"; 97 ctx.beginPath(); 98 ctx.translate(250, 250); 99 ctx.rotate((second * 6 + 180) / 180 * Math.PI); 100 ctx.moveTo(0, 0); 101 ctx.lineTo(0, 150); 102 ctx.closePath(); 103 ctx.stroke(); 104 ctx.restore(); 105 106 // 分针 107 ctx.save(); 108 ctx.lineWidth = 4; 109 ctx.strokeStyle = "#0ff"; 110 ctx.beginPath(); 111 ctx.translate(250, 250); 112 ctx.rotate((minute * 6 + second * 0.1 + 180) / 180 * Math.PI); 113 ctx.moveTo(0, 0); 114 ctx.lineTo(0, 130); 115 ctx.closePath(); 116 ctx.stroke(); 117 ctx.restore(); 118 119 // 时针 120 ctx.save(); 121 ctx.lineWidth = 6; 122 ctx.strokeStyle = "#000"; 123 ctx.beginPath(); 124 ctx.translate(250, 250); 125 ctx.rotate((hour * 30 + minute * 0.5 + 180) / 180 * Math.PI); 126 ctx.moveTo(0, 0); 127 ctx.lineTo(0, 90); 128 ctx.closePath(); 129 ctx.stroke(); 130 ctx.restore(); 131 132 ctx.fillStyle = "#f00"; 133 ctx.beginPath(); 134 ctx.arc(250, 250, 10, 0, 2 * Math.PI); 135 ctx.closePath(); 136 ctx.fill(); 137 ctx.fillStyle = "#000"; 138 ctx.beginPath(); 139 ctx.arc(250, 250, 8, 0, 2 * Math.PI); 140 ctx.closePath(); 141 ctx.fill(); 142 ctx.fillStyle = "#fff"; 143 ctx.beginPath(); 144 ctx.arc(250, 250, 6, 0, 2 * Math.PI); 145 ctx.closePath(); 146 ctx.fill(); 147 148 } 149 drawClock(); 150 setInterval(drawClock,10); 151 </script> 152 </body> 153 </html>
