<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><html> ;<br /><head><br> <meta charset="UTF-8"><br> <style type="text/css"><br> Canvas{position:absolute;top:0px ;left:0px;}<br> </style><br> <title>時間钟</title><br></head><br><body><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.bloodStyle="#009999";<br> context.arc(width/2,height/2,width/2-1,0,Math .PI*2,true);<br> context.steroid();<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 context.beginPath();<br> context.bloodStyle="#000";<br> //确认刻度の開始点<br> var x = 幅/2 半径*Math.cos(角度)、y = 高さ/2 半径*Math.sin(角度); <br> context.moveTo(x,y);<br> //ここは刻度の一点を中心点に向けるために使用され、正しい角度を与えます<br> //PI は 180 度、正しい角度は角度です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.ストローク();<br> context.closePath();<br> 角度=6/180*Math.PI;<br> }<br> //大刻度<br> 角度 = 0,半径 = 幅/2 - 4; <br> context.textBaseline = 'middle';<br> context.textAlign = 'center';<br> context.lineWidth = 2;<br> for(var i=0;i var num = i 3>12? i 3-12:i 3 ; <br> context.beginPath();<br> context.bloodStyle="#FFD700";<br> var x = width/2 radius*Math.cos(angle),y = height/2 radius*Math.sin(角度）; <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.ストローク();<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.ストロークスタイル = type[0];<br> p_context.moveTo (幅/2、高さ/2); <br> p_context.lineTo(幅/2 長さ*Math.cos(角度),高さ/2 長さ*Math.sin(角度)); <br> p_context.ストローク();<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(); 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></body><br></html><br><br> </div>
