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

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

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

알아두셔야 할 사항:

캔버스 태그는 그래픽 컨테이너일 뿐이므로 그래픽을 그리려면 스크립트를 사용해야 합니다. 기본 크기: 너비 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 코드클립보드에 콘텐츠 복사

>
<html lang="en- 미국'>
<머리>
<메타 문자 집합="UTF- 8">
<제목>제목>
<스크립트>
window.onload = 함수(){
var oC = document.getElementById('ch1');
var oGC = oC.getContext('2d');
function drawClock(){
var x = 200; //정의 坐标
var y = 200;
var r = 150; //정의钟表半径
oGC.clearRect(0,0,oC.width,oC.height);//清공画布
var oDate = new Date(); //创建日期对象
var 오아워스 = 오데이트 .Gethours () //; var 🎜>
var 🎜> ~ 🎜> var var
osenvalue = (-90 osen*6)*math.pi/180 oGC.beginPath();//시작
for(var i=
0;i<60
;i ){ //i는 60으로 시계의 작은 눈금 60개를 나타냅니다. oGC.moveTo(x,y)

OGC.ARC (x, y, r, 6*i*math.pi/180,6*(i 1)*math.pi/180, false) // 6도에서 12학번

oGC.closePath()

oGC.스트로크()

> oGC.beginPath() oGC.moveTo(x,y)

oGC.arc(x,y,r*19/20,0,360*(i 1)*Math.PI/180,false)

oGC.closePath();//종료

oGC.fill()

~ 🎜>

> ’s ‐ GC.be''s-의 t------oGC.beginPath();

for(i=0;i<

12;i ){ //i는 12이며 시계 눈금의 12개 그리드를 나타냅니다.

oGC.moveTo(x,y)

oGC.closePath()

oGC.스트로크()

~ oGC.beginPath() oGC.moveTo(x,y)

oGC.arc(x,y,r*18/20,360*(i 1)*Math.PI/180,false);

oGC.closePath()

oGC.fill();//다이얼 완료

<<>

OGC.LineWidth

;

oGC.beginPath();//시침 그리기 시작

oGC.moveTo(x,y)

oGC.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);//시침 크기와 라디안 설정

oGC.closePath()

oGC.스트로크()

<<>

OGC.LineWidth =

3 ;

oGC.beginPath();//분침 그리기 시작

oGC.moveTo(x,y)

OGC.ARC (x, y, r*14/20, ominvalue, ionValue, false) // 크기 및 곡선 설정

oGC.closePath()

oGC.스트로크()

<<> OGC.LineWidth = 1 // 초침의 너비 설정

oGC.beginPath();//초침 그리기 시작

oGC.moveTo(x,y)

OGC.ARC (x, y, r*19/20, osenvalue, osenvalue, false) // 초침과 곡선의 크기 설정

oGC.closePath()

oGC.스트로크()

setInterval(drawClock,1000);//타이머를 설정하고 시계가 실행되도록 합니다.

drawClock()

};

스크립트>

머리>

<몸>

<캔버스 id = "ch1" 너비 = "400px" 높이 = "400px">캔버스>

몸>

html>

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

성명：

이전 기사：HTML5_html5 튜토리얼 기술의 매니페스트 캐시 사용에 대한 자세한 설명다음 기사：HTML5_html5 튜토리얼 기술의 매니페스트 캐시 사용에 대한 자세한 설명

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

관련 기사