찾다

집 >웹 프론트엔드 >H5 튜토리얼 >순수 HTML5_html5 튜토리얼 기술을 사용하여 웹페이지에 시계를 작성하기 위한 코드 공유

순수 HTML5_html5 튜토리얼 기술을 사용하여 웹페이지에 시계를 작성하기 위한 코드 공유

WBOY
WBOY원래의
2016-05-16 15:46:231916검색

알아두셔야 할 사항:

캔버스 태그는 그래픽 컨테이너일 뿐이므로 그래픽을 그리려면 스크립트를 사용해야 합니다. 기본 크기: 너비 300px, 높이 150px

getContext() 메서드는 캔버스에 그리기 위한 메서드와 속성을 제공하는 객체를 반환합니다. ——컨텍스트 개체를 가져옵니다.
캔버스에 텍스트, 선, 직사각형, 원 등을 그리는 데 사용할 수 있는 getContext("2d") 개체 속성 및 메서드.

fillRect(l,t,w,h): 기본 색상은 검정색입니다. 스트로크Rect(l,t,w,h): 테두리가 있는 정사각형입니다. 기본 1픽셀 검정색 테두리

setInterval() 메서드는 지정된 기간(밀리초 단위)에 따라 함수를 호출하거나 표현식을 계산할 수 있습니다.

beginPath(): 현재 지점을 (0,0)으로 설정하는 경로 그리기의 시작을 정의합니다. 캔버스 환경이 처음 생성되면 BeginPath()
메서드가 명시적으로 호출됩니다.
closePath(): 경로 그리기 종료(시작점과 끝점 연결)


원 그리기:
호(x, y, 반지름, 시작 호, 끝 호, 회전 방향)
x, y: 시작 위치
호와 각도의 관계: 라디안 = 각도 *Math.PI/180
회전 방향: 시계 방향(기본값: false, 반시계 방향: true)

코드:

XML/HTML 코드클립보드에 콘텐츠 복사
  1. >  
  2. <html lang="en- 미국'>  
  3. <머리>  
  4.         <메타 문자 집합="UTF- 8">  
  5.         <제목>제목>  
  6.         <스크립트>  
  7.                window.onload = 함수(){   
  8.                        var oC = document.getElementById('ch1');   
  9.                       var oGC = oC.getContext('2d');   
  10.   
  11.                        function drawClock(){   
  12.                               var x = 200;   //정의 坐标   
  13.                               var y = 200;   
  14.                               var r = 150;  //정의钟表半径   
  15.   
  16.                               oGC.clearRect(0,0,oC.width,oC.height);//清공画布   
  17.   
  18.                               var oDate = new Date();      //创建日期对象   
  19. var 오아워스 = 오데이트 .Gethours () //; var 🎜>
  20. var 🎜>                                                                                                 ~                                            🎜>                           var var
  21. osenvalue = (-90 osen*6)*math.pi/180 oGC.beginPath();//시작
  23. for(var i=
  24. 0;i<60
  25. ;i ){           //i는 60으로 시계의 작은 눈금 60개를 나타냅니다. oGC.moveTo(x,y)
    26. OGC.ARC (x, y, r, 6*i*math.pi/180,6*(i 1)*math.pi/180, false) // 6도에서 12학번
    27.                                                           
  27. oGC.closePath()
  28. oGC.스트로크()
  30.                                                                                                 > oGC.beginPath() oGC.moveTo(x,y)
    31. oGC.arc(x,y,r*19/20,0,360*(i 1)*Math.PI/180,false)
    33. oGC.closePath();//종료
    34. oGC.fill()
    36.                                                                                                 ~    🎜>
  36.                                                                                                      > ’s ‐ GC.be''s-의 t------oGC.beginPath();                    
  38. for(i=0;i<
  39. 12;i ){                  //i는 12이며 시계 눈금의 12개 그리드를 나타냅니다.
  40. oGC.moveTo(x,y)
  41.                                                                                                      >                                                           
  42. oGC.closePath()
  43. oGC.스트로크()
  45.                                                                                                 ~                                                 oGC.beginPath() oGC.moveTo(x,y)
  46.                                 oGC.arc(x,y,r*18/20,360*(i 1)*Math.PI/180,false);                    
  47. oGC.closePath()
  48. oGC.fill();//다이얼 완료
  50. <<>
    51. OGC.LineWidth
  51. =
    52. 5
  52. ;
    53. oGC.beginPath();//시침 그리기 시작
  53. oGC.moveTo(x,y)
    54. oGC.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);//시침 크기와 라디안 설정
    55. oGC.closePath()
    56. oGC.스트로크()
    58. <<>
  58. OGC.LineWidth =
  59. 3 ;
  60. oGC.beginPath();//분침 그리기 시작
  61. oGC.moveTo(x,y)
  63. OGC.ARC (x, y, r*14/20, ominvalue, ionValue, false) // 크기 및 곡선 설정
  64. oGC.closePath()
  65. oGC.스트로크()
  67. <<> OGC.LineWidth = 1 // 초침의 너비 설정
    68. oGC.beginPath();//초침 그리기 시작
    69. oGC.moveTo(x,y)
  70. OGC.ARC (x, y, r*19/20, osenvalue, osenvalue, false) // 초침과 곡선의 크기 설정
  71. oGC.closePath()
  72. oGC.스트로크()
  73.                                                             
  74. setInterval(drawClock,1000);//타이머를 설정하고 시계가 실행되도록 합니다.
  75. drawClock()
  76. };
  77. 스크립트>
  78. 머리>
  79. <몸>
  80.  <캔버스 id = "ch1" 너비 = "400px" 높이 = "400px">캔버스> 
  81. 몸>
  82. html>

데모를 보려면 아래 결과를 클릭하세요.
http://jsfiddle.net/eh02450b/2/

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML5_html5 튜토리얼 기술의 매니페스트 캐시 사용에 대한 자세한 설명다음 기사：HTML5_html5 튜토리얼 기술의 매니페스트 캐시 사용에 대한 자세한 설명

관련 기사

더보기