1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 * 8 { 9 margin: 0; 10 padding: 0; 11 } 12 #box 13 { 14 width: 500px; 15 height: 500px; 16 margin: 0 auto; 17 position: relative; 18 } 19 #cas 20 { 21 /*background: #ccc;*/ 22 } 23 #time2 24 { 25 color: red; 26 background: black; 27 position: absolute; 28 bottom: 36%; 29 left: 35%; 30 } 31 </style> 32 </head> 33 <body> 34 <div id="box"> 35 <canvas width="400" height="400" id="cas"></canvas> 36 <div id="time2"></div> 37 </div> 38 <script > 39 var cas=document.getElementById('cas'); 40 var ctx=cas.getContext('2d'); 41 var time2=document.getElementById('time2'); 42 function clock () { 43 ctx.beginPath(); 44 ctx.arc(200,200,190,0,2*Math.PI,false); 45 ctx.clip(); 46 // ctx.stroke(); 47 ctx.closePath(); 48 //画圆盘 49 var img=new Image(); 50 img.src='images/1.png'; 51 img.onload=function () { 52 /* 获取时间*/ 53 var time=new Date(); 54 var h=time.getHours(); 55 var m=time.getMinutes(); 56 var s=time.getSeconds(); 57 h=h>=11?h-12:h;//24小时制转换成12小时制 58 h=h+(m/60);//分钟转换成的小时 59 m=m+(s/60);//秒数转换成的分钟 60 time2.innerHTML=parseInt(h)+':'+parseInt(m)+":"+s; 61 /* 画背景图*/ 62 ctx.drawImage(img,0,0,400,400); 63 /*中心原点*/ 64 ctx.beginPath(); 65 ctx.source='over'; 66 ctx.arc(200,200,5,0,360,false); 67 ctx.fillStyle='yellow'; 68 ctx.strokeStyle='pink'; 69 ctx.stroke(); 70 ctx.fill(); 71 ctx.closePath(); 72 73 74 for(var i=0;i<60;i++){//分刻度 75 ctx.save();//保存原始状态 76 ctx.beginPath(); 77 ctx.translate(200,200);//改变中心位置 78 ctx.rotate(6*i*Math.PI/180);//每一个的旋转角度 79 ctx.moveTo(0,-190); 80 ctx.lineTo(0,-180); 81 ctx.strokeStyle='black'; 82 ctx.lineWidth=10; 83 ctx.stroke(); 84 ctx.closePath(); 85 ctx.restore();//恢复初始状态 86 } 87 for(var i=0;i<12;i++){//时刻度 88 ctx.save();//保存原始状态 89 ctx.beginPath(); 90 ctx.translate(200,200);//改变中心位置 91 ctx.rotate(30*i*Math.PI/180);//每一个的旋转角度 92 ctx.moveTo(0,-190); 93 ctx.lineTo(0,-170); 94 ctx.strokeStyle='red'; 95 ctx.lineWidth=10; 96 ctx.stroke(); 97 ctx.closePath(); 98 ctx.restore();//恢复初始状态 99 100 /*时针*/ 101 ctx.save();//保存状态 102 ctx.beginPath(); 103 ctx.translate(200,200); 104 ctx.rotate(h*30*Math.PI/180);//时针旋转的角度 105 ctx.moveTo(0,0); 106 ctx.lineTo(0,-150); 107 ctx.strokeStyle='pink'; 108 ctx.lineWidth=5; 109 ctx.stroke(); 110 ctx.closePath(); 111 ctx.restore(); 112 113 /*分针走动*/ 114 ctx.save();//保存状态 115 ctx.beginPath(); 116 ctx.translate(200,200); 117 ctx.rotate(m*6*Math.PI/180);//分针旋转的角度 118 ctx.moveTo(0,0); 119 ctx.lineTo(0,-165); 120 ctx.strokeStyle='yellow'; 121 ctx.lineWidth=3; 122 ctx.stroke(); 123 ctx.closePath(); 124 ctx.restore(); 125 126 /*秒针走动*/ 127 ctx.save();//保存状态 128 ctx.beginPath(); 129 ctx.translate(200,200); 130 ctx.rotate(s*6*Math.PI/180);//秒针旋转的角度 131 ctx.moveTo(0,0); 132 ctx.lineTo(0,-180); 133 ctx.strokeStyle='blue'; 134 ctx.lineWidth=1; 135 ctx.stroke(); 136 ctx.closePath(); 137 //秒针点 138 ctx.beginPath(); 139 ctx.arc(0,-160,3,0,360,false); 140 ctx.fillStyle='yellow'; 141 ctx.fill(); 142 ctx.restore(); 143 144 } 145 } 146 } 147 clock(); 148 setInterval(clock,1000); 149 </script> 150 </body> 151 </html>
