HTML5의 캔버스 경로 드로잉 및 좌표 변환 응용 프로그램 예제

저자：Eve Cole 업데이트 시간：2025-05-11 16:16:01

주석 :이 기사는 HTML5 시계 응용 프로그램을 작성하여 좌표 변환의 번역 및 회전 변환을 설정하고 HTML5 캔버스, 시작 경로, ClosePath, REC, Arc 등의 경로 도면을 설정하고 코드를 직접 업로드하고 참조 할 수 있습니다.

이전 기사에서는 HTML5의 캔버스에 대해 배웠습니다. 말할 것도없이, 우리는 HTML5 시계 응용 프로그램을 작성해 볼 수 있습니다. 여기서 우리는 주로 좌표 변환의 번역 및 회전 변환, HTML5 캔버스, 시작 경로, ClosePath, Rec, Arc 등의 경로 도면 및 HTML5 캔버스 경로 드로잉, 저장, 복원의 중요한 도면 상태 저장 및 복구 메커니즘을 설정합니다.

많이 말하지 않고 코드를 업로드하겠습니다. 궁금한 점이 있으면 질문을하고 조언을 해주세요.

아래 렌더링 :

암호:

<html>

<헤드>

</head>

<body>

<canvas> 브라우저가 지원하지 않습니다 </canvas>

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);

</스크립트>

</body>

</html>