<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><!DOCTYPE HTML>< ;<br /><head><br> <meta charset="UTF-8"><br> <style type="text/css"><br> kanvas{position:absolute;top:0px ;kiri:0px;}<br> </style><br> <tajuk>时钟</title><br></kepala><br><badan><br> <kanvas 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> sudut var = 0,jejari = lebar/2 - 4; <br> untuk(var i=0;i<60;i ){<br /> context.beginPath();<br /> context.strokeStyle="#000";<br /> //确认刻度的起始点<br /> var x = lebar/2 jejari*Math.cos(sudut),y = tinggi/2 jejari*Math.sin(sudut); <br /> context.moveTo(x,y);<br /> //这里是用来将刻度的另一点指向中心点，并给予是用来将刻度的另一点指向中心点，并给予正确的角度>，<🎜正确的另一点指向中心点，并给予正确的角度>，<🎜正确的角度> ，<🎜角度的角度sudut 度就是180度，正好相反方向<br /> var temp_angle = Sudut Matematik.PI; <br /> context.lineTo(x 3*Math.cos(temp_angle),y 3*Math.sin(temp_angle));<br /> context.stroke();<br /> context.closePath();<br /> sudut =6/180*Math.PI;<br /> }<br /> //大刻度<br /> sudut = 0,jejari = lebar/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 = lebar/2 jejari*Math.cos(sudut),y = tinggi/2 jejari*Math.sin( sudut); <br> context.moveTo(x,y);<br> var temp_angle = Sudut Matematik.PI; <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> sudut =30/180*Math.PI;<br> }<br> <br> fungsi Penunjuk(){<br> var p_type = [['#000',70,1],['#ccc',60,2],['red',50,3] ];<br> fungsi drwePointer(jenis,sudut){<br> jenis = p_type[type];<br> sudut = sudut*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 (lebar/2,tinggi/2); <br> p_context.lineTo(lebar/2 panjang*Math.cos(sudut),tinggi/2 panjang*Math.sin(sudut)); <br> p_context.stroke();<br> p_context.closePath();<br> <br> }<br> setInterval(function (){<br> p_context.clearRect(0,0,height,width); <br> var masa = new Date();<br> var h = time.getHours();<br> var m = time.getMinutes();<br> var s = time.getSeconds(); h = h>12?h-12:h;<br> h = h m/60; <br> h=j/12;<br> m=m/60;<br> s=s/60;<br> drwePointer(0,s);<br> drwePointer(1,m);<br> drwePointer(2,j); <br> },500);<br> }<br> var p = new Pointer() ;<br> </script><br></body><br></html><br><br> </div>
