1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109
| <canvas id="clock" width="400" height="400"></canvas> <script type="text/javascript"> var time = new Date(); var h = time.getHours(); var m = time.getMinutes(); var s = time.getSeconds(); h=h>12?(h-12)*5+parseInt(m/12):h*5+parseInt(m/12);
var x=200,y=200,sAngle=0; function draw(){ var c=document.getElementById("clock"); var ctx=c.getContext("2d"); ctx.clearRect(0,0,c.width,c.height); s++; ctx.fillStyle = '#fff' ctx.fillRect(0,0,c.width,c.height); truectx.beginPath(); ctx.arc(x,y,10,0,Math.PI*2,true); truectx.fill(); truectx.closePath(); ctx.fillStyle="#ccc"; ctx.font = "12pt Arial"; ctx.fillText("Helloweba.com",150,250); ctx.fillStyle="#666"; ctx.font = "14pt Verdana"; ctx.fillText(time.getMonth()+1+"-"+time.getDate(),183,170); truetrue ctx.save(); for(var i=0;i<12;i++){ var angle=(Math.PI*2)/12; ctx.beginPath(); ctx.font="12px Arial"; if(i==0||i==3||i==6||i==9){ ctx.fillStyle="red"; radius=4; }else{ ctx.fillStyle="blue"; radius=3; } ctx.arc(x,y-100,radius,0,Math.PI*2,true); ctx.fill(); trans(ctx,x,y,angle); } ctx.restore(); sAngle=(Math.PI*2)/60*s; ctx.save(); ctx.strokeStyle="red"; ctx.lineWidth=3; trans(ctx,x,y,(Math.PI*2)/60*h); pointer(ctx,x,y,y-40); ctx.restore(); truectx.save(); ctx.strokeStyle="blue"; truectx.lineWidth=2; trans(ctx,x,y,(Math.PI*2)/60*m); truepointer(ctx,x,y,y-68); truectx.restore(); truectx.save(); ctx.strokeStyle="#000"; truetrans(ctx,x,y,sAngle); truepointer(ctx,x,y,y-80); truectx.restore(); if(s%60==0){ truetruesAngle=0,s=0,m++; if(m%12==0){ if(m!=0)h++; if(m%60==0)m=0; } if(h%60==0)h=0; } }
function pointer(ctx,x,y,z){ ctx.beginPath(); ctx.moveTo(x,y); ctx.lineTo(x,z); ctx.stroke(); ctx.fill(); } function trans(ctx,x,y,angle){ ctx.transform(Math.cos(angle), Math.sin(angle), -Math.sin(angle), Math.cos(angle), x*(1-Math.cos(angle)) + x*Math.sin(angle), y*(1-Math.cos(angle)) - y*Math.sin(angle)) } setInterval("draw()",1000); </script>
|