<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><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.getElement ;ById(p_cancanvas'); <br /> var p_context = p_canvas.getContext('2d');<br /> <br /> var height=200,width=200;<br /> //畫大圓<br /> context.beginPath();<br /> //畫大圓<br /> context.beginPath();< .tripStyle="#009999";<br /> context.arc(width/2,height/2,width/2-1,0,Math .PI*2,true);<br /> context.lines();<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.行程Style="#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.lines();<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<12;i ){<br /> var num = i 3>12 ？ i 3-12:i 3 ; <br /> context.beginPath();<br /> context.tripStyle="#FFD700";<br /> var x = 寬度/2 半徑*Math.cos(角度),y = 高度角度/2 半徑*Math.sin(角度）; <br /> context.moveTo(x,y);<br /> var temp_angle = Math.PI 角度; <br /> context.lineTo(x 8*Math.cos(temp_angle) ,y 8*Math.sin(temp_angle));<br /> context.lines();<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 /> 函數指標(){<br /> var<br /> <br /> 函數指標(){<br /> var<br /> <br /> 函數指標(){<br /> var<br /> <br /> 函數指標(){<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 （寬度/2，高度/2）； <br /> p_context.lineTo(寬度/2 長度* Math.cos(角度),高度/2 長度*Math.sin(角度)); <br /> p_context.lines();<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;</script> </div> h=h/12; m=m/60; s=s/60; drwePointer(0,s); drwePointer(1,m); drwePointer(2,h); },500); } var p = new Pointer() ;
