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>




효과









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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사:Select2 플러그인의 클릭 및 선택된 이벤트 인스턴스에 대한 자세한 설명다음 기사:Select2 플러그인의 클릭 및 선택된 이벤트 인스턴스에 대한 자세한 설명

관련 기사

더보기