댓글 : html5canvas에서 구현 한 시계는 참조하십시오.
<! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<title> html 시계 </title>
</head>
<body>
<canvas>
브라우저는 캔버스 태그를 지원하지 않으며 시간을 표시 할 수 없습니다!
</캔버스>
<script type = "text/javaScript">
// 캔버스 배경색
var clastbackgroundcolor = "#ABCDEF";
// 핸드 컬러
var HoustpointColor = "#000";
// 시간 손의 두께
var houghpointwidth = 7;
// 시간 길이
var hourpointlength = 100;
// 핸드 컬러
var minpointColor = "#000";
// 분 손의 두께
var minpointwidth = 5;
// 분 손 길이
var minpointlength = 150;
// 중고색
var secpointcolor = "#f00";
// 두 번째 두께
var secpointWidth = 3;
// 중고 길이
var secpointlength = 170;
// 다이얼 색상
var clockpanelcolor = "#ABCDEF";
// 스케일 색상으로 다이얼
var scalecolor = "#000";
// 대규모 폭을 다이얼 3 6 9 12
var scalebigwidth = 9;
// 다이얼의 대규모 길이
var scalebiglength = 15;
// 다이얼의 너비는 소규모 스케일입니다
var scalesmallwidth = 5;
// 다이얼의 길이는 소규모입니다
var scalesmalllength = 10;
// 중심 색상
var centercolor = '빨간색';
// 시계 캔버스
var clock = document.getElementById ( 'clock');
clock.style.background = clastbackbackgroundcolor;
// 시간 핸드 캔버스의 드로잉 환경 (페인트 보드)
var panel = clock.getContext ( '2d');
// 선을 그립니다
/**
*라인 세그먼트를 그리십시오
*
*
*/
함수 드로우 라인 (p, 너비, 색상, startx, 스타일, endx, endy, ran, cx, cy) {
// 들어오는 아트 보드를 저장합니다.
p.save ();
// 브러시 너비를 설정합니다
p.linewidth = 너비;
// 브러시 색상을 설정합니다
p.strokestyle = 색상;
// 아트 보드의 이전 내용과의 간섭을 피하기 위해 그리기 경로를 새로 열었습니다.
p.beginpath ();
p.translate (CX, CY);
//회전
p.rotate (Ran);
// 브러시를 시작 위치로 이동합니다
p.moveto (startx, Starty);
// 브러시를 끝 위치로 이동합니다
P.Lineto (Endx, Endy);
// 라인 드로잉 작동
p.Stroke ();
// 도면 경로를 닫으려면 나중에 아트 보드에 그린 내용에 대한 간섭을 피하십시오.
p.closepath ();
// 들어오는 아트 보드 객체의 레이어를 오버레이합니다
p.Restore ();
}
/**
*수평 선을 그립니다
*/
함수 DrawHorizontAlline (P, 너비, 길이, 색상, STARTX, Starty, Ran, CX, Cy) {
드로 라인 (p, 너비, 색상, startx, 스타일, startx+길이, 스타일, ran, cx, cy);
}
/**
*원을 그리십시오
*/
함수 DrawCircle (P, 너비, 색상, Centrex, Centrey, R) {
p.save ();
// 브러시 너비를 설정합니다
p.linewidth = 너비;
// 브러시 색상을 설정합니다
p.strokestyle = 색상;
// 아트 보드의 이전 내용과의 간섭을 피하기 위해 그리기 경로를 새로 열었습니다.
p.beginpath ();
// 원을 그리십시오
P.ARC (Centrex, Centrey, R, 0,360, False);
// 라인 드로잉 작동
p.Stroke ();
// 도면 경로를 닫으려면 나중에 아트 보드에 그린 내용에 대한 간섭을 피하십시오.
p.closepath ();
// 들어오는 아트 보드 객체의 레이어를 오버레이합니다
p.Restore ();
}
함수 드로우 포인트 (p, 너비, 색상, 센트 렉스, 센터, r) {
p.save ();
// 브러시 너비를 설정합니다
p.linewidth = 너비;
// 브러시 색상을 설정합니다
p.fillStyle = 색상;
// 아트 보드의 이전 내용과의 간섭을 피하기 위해 그리기 경로를 새로 열었습니다.
p.beginpath ();
// 원을 그리십시오
P.ARC (Centrex, Centrey, R, 0,360, False);
// 라인 드로잉 작동
p.fill ();
// 도면 경로를 닫으려면 나중에 아트 보드에 그린 내용에 대한 간섭을 피하십시오.
p.closepath ();
// 들어오는 아트 보드 객체의 레이어를 오버레이합니다
p.Restore ();
}
함수 DrawScales (P) {
// 작은 규모를 그립니다
for (var i = 0; i <60; i ++) {
Drawhorizontalline (P, Scalesmallwidth, Scalesmalllength, Scalecolor, 195-Scalesmalllength, 0, I*6*Math.pi/180,250,250);
}
// 대규모를 그립니다
for (var i = 0; i <12; i ++) {
DrawHorizontAlline (P, I%3 == 0? ScaleBigWidth*1.2 : ScaleBigWidth, I%3 == 0? ScaleBiglength*1.2 : ScaleBiglength, ScaleColor, 195-ScaleBiglength, 0, I*30*Math.pi/180,250,250);
// 디지털 스케일을 추가 할 수 있습니다
}
}
함수 DrawHourPoint (P, Hour) {
DrawHorizOntAlline (P, HourPointWidth, HourPointLength, HourPointColor, -10,0, (Hour-3)*30*Math.pi/180,250,250);
}
함수 DrawMinPoint (P, Min) {
DrawHorizontAlline (P, MinPointWidth, MinPointLength, MinPointColor, -15,0, (Min-15)*6*Math.pi/180,250,250);
}
함수 drawsecpoint (p, sec) {
DrawHorizontAlline (P, SecpointWidth, SecpointLength, SecpointColor, -15,0, (Sec-15)*6*Math.Pi/180,250,250);
}
함수 drawClock () {
PALEN.CLEARRECT (0,0,500,500);
PALEN.FILLTEXT ( "", 10,20);
PALEN.FILLTEXT ( "<a href ="http://www.vevb.com ", 10,40"> ", 10,40 </a>);
var date = 새 날짜 ();
var sec = date.getSeconds ();
var min = date.getminutes ();
var hour = date.gethours () + min/60;
DrawCircle (패널, 7, 'Blue', 250,250,200);
DrawScales (패널);
DrawHourPoint (패널, 시간);
DrawMinPoint (패널, 최소);
DrawSecpoint (패널, SEC);
DrawPoint (패널, 1, CenterColor, 250,250,7);
// drowhorizontalline (패널, 10,10, '빨간색', -5,0,0,250,250);
}
//drowhorizontalline(panel,7,30,'#f00',0,0,math.pi,250,250);
DrawClock ();
SetInterval (Drowclock, 1000);
함수 save () {
var image = clock.todataurl ( "image/png"). 교체 ( "image/png", "image/octet-stream");
location.href = 이미지;
}
</스크립트>
</body>
</html>