캔버스에 있는 캔버스 시계의 간단한 예

이건 예전에 글쓰기 연습을 했던 캔버스 시계입니다

　
　　                                                    　　　}
　　　
　
　
　　

　　　<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>

효과

위 내용은 캔버스에 있는 캔버스 시계의 간단한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!