meta charset="UTF-8">
<script><br> var can =document.getElementsByTagName("캔버스")[0];<br> var x=can.getContext("2d") ;</p>
<p> x.beginPath();<br> x.fillStyle ="blue";<br> x.arc(250,250,250, Math.PI*0/180,Math.PI*360/180);<br> 위의 파란색으로 채워진 원보다 작은 반지름으로 원을 채우면 파란색 링이 나타납니다 <br> x.beginPath();</p> x.fillStyle= "#ffffff";<p> 0/180,Math.PI*360/180);<br> x.fill();</p> 간격은 <p> for(var i=0;i 250,2 50 );<br> x.lineTo(0,230); <br> x.strok();<br> 그래서 360/12의 간격은 30°입니다. 물론, 더 많이 반복할 수도 있습니다. 숫자로 스케일 변경<br> for(var a=0;a x.save( );</p>
<p> x.beginPath();<br> x.moveTo(0,215);<br> .lineTo(0,230);<br> x.Stroke();<br> x.closePath();<br> 시간, 분, 초를 각각 가져오세요. 시간과 분은 소수점 이하 자리까지 정확해야 합니다</p>
<p> var time=new Date();<br> var 초=time.getSeconds( );<br> var Minutes=time.getMinutes()+seconds/60;<br> var hour=time.getHours()+分/60;<br><br> //12보다 크면 13시가 됩니다. 1시이므로 12를 빼야 합니다<br> if(hours>12){<br> hours=hours-12 <br> <br><br> //2017/06/14 20과 같이 현지 시간이 다이얼에 표시됩니다. 23<br><br> x.beginPath()<br> Text(time.toLocaleString(),150,200)</p> x.closePath();<p></p>
<p> x.save();<br> x.beginPath();<br> x.rotate(hours*30*Math.PI/180);// 시침을 그린 후 현재 시간 * 30은 회전해야 하는 각도입니다. ㅋㅋㅋ 6*Math.PI/180); //분침도 마찬가지입니다 <br> (0,10);<br> | <br> x.save();<br> x.beginPath();<br> x. x.moveTo(0,10 );<br> <br> //초침의 작은 점<br></p> x.save( ); ㅋㅋㅋ 0,6,0,Math.PI*360/180);<p> x.fill();<br> x.closePath (); <br><br> x.arc(250,250,3,0,Math.PI *360/180);<br> 이렇게 매 순간이 움직이고 있습니다. <br> </script>