주석 :이 기사는 HTML5 시계 응용 프로그램을 작성하여 좌표 변환의 번역 및 회전 변환을 설정하고 HTML5 캔버스, 시작 경로, ClosePath, REC, Arc 등의 경로 도면을 설정하고 코드를 직접 업로드하고 참조 할 수 있습니다.
이전 기사에서는 HTML5의 캔버스에 대해 배웠습니다. 말할 것도없이, 우리는 HTML5 시계 응용 프로그램을 작성해 볼 수 있습니다. 여기서 우리는 주로 좌표 변환의 번역 및 회전 변환, HTML5 캔버스, 시작 경로, ClosePath, Rec, Arc 등의 경로 도면 및 HTML5 캔버스 경로 드로잉, 저장, 복원의 중요한 도면 상태 저장 및 복구 메커니즘을 설정합니다.많이 말하지 않고 코드를 업로드하겠습니다. 궁금한 점이 있으면 질문을하고 조언을 해주세요.
아래 렌더링 :
암호:
<html>
<헤드>
</head>
<body>
<canvas> 브라우저가 지원하지 않습니다 </canvas>
<script type = "text/javaScript">
var c = document.getElementById ( "mycanvas");
var cxt = c.getContext ( "2d");
var slen = 60;
var mlen = 50;
var hlen = 40;
cxt.strokerect (0, 0, C.Width, C.height);
cxt.beginpath ();
cxt.strokestyle = "#00f";
cxt.fillstyle = "#00f";
cxt.arc (200, 150, 5, 0, 2 * math.pi, true);
cxt.fill ();
cxt.closepath ();
cxt.beginpath ();
cxt.strokestyle = "#00f";
cxt.arc (200, 150, 100, 0, 2 * math.pi, true);
cxt.stroke ();
cxt.closepath ();
cxt.beginpath ();
CXT.Translate (200, 150); // 원점을 심습니다.
cxt.rotate (-math.pi / 2);
cxt.save ();
for (var i = 0; i <60; i ++) {
if (i % 5 == 0) {
// cxt.fillstyle = "#ff0000";
cxt.fillRect (80, 0, 20, 5);
cxt.fillText ( "" + (i / 5 == 0? 12 : I / 5), 70, 0);
} 또 다른 {
// cxt.strokestyle = "#00f";
cxt.fillRect (90, 0, 10, 2);
}
//document.getElementById("div1").innertext + = "" + i;
cxt.rotate (Math.pi / 30);
}
cxt.closepath ();
var ls = 0, lm = 0, lh = 0;
기능 새로 고침 () {
cxt.restore ();
cxt.save ();
cxt.rotate (ls * math.pi / 30);
cxt.clearRect (5, -1, Slen+1, 2+2);
cxt.restore (); cxt.save ();
cxt.rotate (lm * math.pi / 30);
cxt.clearRect (5, -1, mlen+1, 3+2);
cxt.restore (); cxt.save ();
cxt.rotate (lh * math.pi / 6);
cxt.clearrect (5, -3, hlen+1, 4+2);
var time = 새 날짜 ();
var s = ls = time.getSeconds ();
var m = lm = time.getMinutes ();
var h = lh = time.gethours ();
cxt.restore ();
cxt.save ();
cxt.rotate (s * math.pi / 30);
cxt.fillRect (5, 0, Slen, 2);
cxt.restore (); cxt.save ();
cxt.rotate (m * math.pi / 30);
cxt.fillRect (5, 0, mlen, 3);
cxt.restore (); cxt.save ();
cxt.rotate (h * math.pi / 6);
cxt.fillRect (5, -2, hlen, 4);
}
var myinterval = setInterval ( "refresh ();", 1000);
</스크립트>
<div> </div>
</body>
</html>