<br><div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode3'));"><u>复制代码</u></span></div>代码如下:</div> <div class="msgborder" id="phpcode3"> <br><br><br><br> <meta charset="UTF-8"> <br> <style type="text/css"><br /> canvas{position:absolute;top:0px;left:0px;}<br /> </style> <br> <title>时钟</title> <br><br><br> <canvas id="canvas" width="200" height="200"></canvas><br> <canvas id="p_canvas" width="200" height="200"></canvas><br> <script type="text/javascript"><br /> //获取绘图对象<br /> var canvas = document.getElementById('canvas');<br /> var context = canvas.getContext('2d'); <br /> <br /> var p_canvas = document.getElementById('p_canvas');<br /> var p_context = p_canvas.getContext('2d');<br /> <br /> var height=200,width=200;<br /> //画大圆 <br /> context.beginPath();<br /> context.strokeStyle="#009999";<br /> context.arc(width/2,height/2,width/2-1,0,Math.PI*2,true);<br /> context.stroke();<br /> context.closePath();<br /> //画中间点<br /> context.beginPath();<br /> context.fillStyle="#000";<br /> context.arc(width/2,height/2,3,0,Math.PI*2,true);<br /> context.fill();<br /> context.closePath();<br /> <br /> //画小刻度<br /> var angle = 0,radius = width/2 - 4; <br /> for(var i=0;i<60;i++){<br /> context.beginPath();<br /> context.strokeStyle="#000";<br /> //确认刻度的起始点<br /> var x = width/2 + radius*Math.cos(angle),y = height/2 + radius*Math.sin(angle); <br /> context.moveTo(x,y);<br /> //这里是用来将刻度的另一点指向中心点，并给予正确的角度<br /> //PI是180度，正确的角度就是 angle+180度，正好相反方向<br /> var temp_angle = Math.PI +angle; <br /> context.lineTo(x +3*Math.cos(temp_angle),y+3*Math.sin(temp_angle));<br /> context.stroke();<br /> context.closePath();<br /> angle+=6/180*Math.PI;<br /> }<br /> //大刻度<br /> angle = 0,radius = width/2 - 4; <br /> context.textBaseline = 'middle';<br /> context.textAlign = 'center';<br /> context.lineWidth = 2;<br /> for(var i=0;i<12;i++){<br /> var num = i+3>12? i+3-12:i+3 ; <br /> context.beginPath();<br /> context.strokeStyle="#FFD700";<br /> var x = width/2 + radius*Math.cos(angle),y = height/2 + radius*Math.sin(angle); <br /> context.moveTo(x,y);<br /> var temp_angle = Math.PI +angle; <br /> context.lineTo(x +8*Math.cos(temp_angle),y+8*Math.sin(temp_angle));<br /> context.stroke();<br /> context.closePath();<br /> //大刻度 文字<br /> context.fillText(num,x+16*Math.cos(temp_angle),y+16*Math.sin(temp_angle));<br /> angle+=30/180*Math.PI;<br /> }<br /> <br /> function Pointer(){<br /> var p_type = [['#000',70,1],['#ccc',60,2],['red',50,3]];<br /> function drwePointer(type,angle){<br /> type = p_type[type];<br /> angle = angle*Math.PI*2 - 90/180*Math.PI; <br /> var length= type[1];<br /> p_context.beginPath();<br /> p_context.lineWidth = type[2];<br /> p_context.strokeStyle = type[0];<br /> p_context.moveTo(width/2,height/2); <br /> p_context.lineTo(width/2 + length*Math.cos(angle),height/2 + length*Math.sin(angle)); <br /> p_context.stroke();<br /> p_context.closePath();<br /> <br /> }<br /> setInterval(function (){<br /> p_context.clearRect(0,0,height,width);<br /> var time = new Date();<br /> var h = time.getHours();<br /> var m = time.getMinutes();<br /> var s = time.getSeconds(); <br /> h = h>12?h-12:h;<br /> h = h+m/60; <br /> h=h/12;<br /> m=m/60;<br /> s=s/60;<br /> drwePointer(0,s);<br /> drwePointer(1,m);<br /> drwePointer(2,h); <br /> },500);<br /> }<br /> var p = new Pointer();<br /> </script><br><br><br> </div>
