이 기사 예제는 웹 시계를 그리는 JS+HTML5의 방법을 설명합니다. 웹 페이지에 사용할 수있는 진자가있는 시계를 그립니다. 버튼을 통해 크기와 위치를 조정할 수 있습니다. 특정 구현 컨텐츠는 다음과 같습니다.
<html> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <title> clock </title> <script type = "text/javascript"> var xclock = 300; // 센터 위치 var yclock = 250; // 중심 위치 var d = 180.0; // 시계의 중심 반경 표면 var value = -d*1.07; 함수 확대 () {d ++;} 함수 reding () {d-;} 함수 서쪽 () {var c = document.getElementById ( "mycanvas"); var g2d = c.getContext ( "2d"); G2D.Translate (-1,0); // 테이블 중앙에서 축 원점을 설정합니다. c = document.getElementById ( "mypendulum"); g2d = c.getContext ( "2d"); G2D.Translate (-1,0); // 테이블 중앙에서 축 원점을 설정합니다. c = document.getElementById ( "mycanvas"); var g2d = c.getContext ( "2d"); g2d. 트랜스 슬레이트 (1,0); // 테이블 중앙에서 축 원점을 설정합니다. c = document.getElementById ( "mypendulum"); g2d = c.getContext ( "2d"); g2d. 트랜스 슬레이트 (1,0); // 축의 테이블 중앙에서 시작된 축소} 함수 upward () {var c = oxper.getElementById ( "mycanvas"); var g2d = c.getContext ( "2d"); G2D.Translate (0, -1); // 축을 테이블의 중앙에서 시작하여 c = document.getElementById ( "mypendulum"); g2d = c.getContext ( "2d"); G2D.Translate (0, -1); // 축이 테이블 중앙에서 시작된 축소} 함수 아래로 시작합니다 () {var c = getElementById ( "myCanvas"); var g2d = c.getContext ( "2d"); g2d. 트랜스 슬레이트 (0,1); // 축을 테이블의 중앙에서 시작하여 c = document.getElementById ( "mypendulum"); g2d = c.getContext ( "2d"); g2d. 트랜스 슬레이트 (0,1); // 테이블 중앙에서 시작된 축을 설정} 함수 fillPolygon (a, b, fillColor, Ctx) {ctx.beginPath (); ctx.moveto (a [0], b [0]); for (var J = 1; Math.floor (Math.random ()*16) .ToString (16); return s;} function locateCoordinate () {var c = document.getElementById ( "mycanvas"); var g2d = c.getContext ( "2d"); G2D.Translate (Xclock, Yclock); // 좌표 축이 테이블 중앙에서 시작된 좌표 var c = document.getElementById ( "myPendulum"); var g2d = c.getContext ( "2d"); G2D.Translate (Xclock, Yclock); // 테이블의 중심에서 원인 좌표를 설정} 함수 drawface () {// 클럭 표면의 드로우 페이스 메소드를 정의합니다. var y = 새로운 배열 (Math.round (-d*1.07), -d, math.round (-d*0.9), -d);/*3, 6, 9 및 12 o'clock*/var x1 = 새로운 배열 (0, math.round (d/15), 0, math.); -D/15); 배열 (math.round (-d*1.13), -d, math.round (-d*0.9), -d); var c = document.getElementById ( "mycanvas"); var g2d = c.getContext ( "2d"); // beginpath (); g2d.arc (0,0, d, 0, 2*math.pi); g2d.strokestyle = "Lightgray"; g2d.linewidth = d/18; G2D.Stroke (); // 마지막 스트로크, 시계의 가장자리를 그리십시오. // (var i = 0; i <12; i ++) {// 루프 문의 루프 본문의 경우 (i%3 == 0) {// 더 큰 크기의 빨간 다이아몬드를 3,6,9,12 점을 나타내는 경우 (x1, y1, g2d)를 나타 내기 시작합니다. } else {// 남은 시간을 나타내는 작은 주황색 다이아몬드를 그립니다. } // 시계의 중심을 원점으로 가져 가면 좌표계가 시계 방향으로 30도 회전하여 다음 시간 위치 G2D의 다이아몬드 마크를 그립니다 (Math.pi/6.0); } // 루프 진술의 루프 바디 끝} // 클럭 표면의 드로우 페이스 메소드 시간 손, 분 핸드 및 중고를 정의하는 메소드 Drawneedles * 공식 매개 변수 Hradian, Unit Radian은 0 포인트에서 계산 된 시간의 라디안 위치, * 공식 매개 변수 Mradian, unit srad의 radian 위치입니다. 라디안은 0 초에서 계산 된 중고의 라디안 위치입니다. */함수 drawneedles (Hradian, Mradian, Sradian) {var c = docut // 시간의 다각형 정점을 나타내는 좌표 배열 핸드 var hx = 새로운 배열 (0, math.round (d/19), 0, math.round (-d/19)); var y = new Array (Math.Round (-D/2), Math.Round (-D/3), 0, Math.Round (-D/3)); FillPolygon (hx, hy, "magenta", g2d); // 시간 핸드를 자주색-빨간색으로 설정하고 // 시계 중심을 원점으로 가져 가서 반 시계 반대 방향으로 hradian radian을 회전시켜 좌표계 g2d.rotate (-hradian)를 복원합니다. // 시계 중심을 원점으로 사용하고 Mradian Radian을 시계 방향으로 회전시켜 Minute hand g2d.rotate (mradian)를 그립니다. // minge hand var var var var var var var var var var var var var var var (math. round (-d/19), 0, math.round (d/19))를 나타내는 좌표 배열; var my = new Array (0, math.round (-d/1.3), 0); FillPolygon (MX, My, "Grey", G2D); // 분 손을 회색으로 설정 // 원점이 시계를 가져 가면 좌표계가 Mradian Radian을 시계 반대 방향으로 회전시켜 좌표계 g2d.rotate (-mradian)를 복원합니다. // 시계를 원점으로 사용하면 좌표계가 Sradian Radian을 시계 방향으로 회전시켜 중고 g2d.rotate (Sradian)를 그립니다. // 임의의 색상 g2d.strokestyle = 'green'에 중고; g2d.linewidth = "1"; G2D.Moveto (0,0); g2d.lineto (0, math.round (-d/1.1)); G2D.Stroke (); g2d.beginpath (); g2d.arc (0, math.round (-d), d/18, 0, 2*math.pi); g2d.fillstyle = randomcolor (); g2d.fill (); // 마지막 스트로크의 경우, 초침의 정점에 작은 공을 그립니다. // 시계의 중심을 원점으로 가져 가서 스라 데 디안 라디안을 시계 반대 방향으로 회전시켜 좌표계 g2d.rotate (-sradian)를 복원하십시오. } // 드로잉 바늘 방법의 코드 블록 DrawNeedles/* 순간 시간을 나타내는 문자열을 그립니다*/function drawtime () {var time = new Date (); // 현재 시간을 얻습니다. var hour = time.gethours (); // 시간을 가져옵니다 var minute = time.getMinutes (); // minge var var second = time.getSeconds (); // 초 수를 가져옵니다. var apm = "am"; // 기본 표시 모닝 : AM. var canvas = document.getElementById ( "mycanvas"); var g2d = canvas.getContext ( "2d"); if (Hour> 12) {// 시간 표시를 중지 = Hour-12; APM = "PM"; } if (minute <10) {// 분에 1 자리 만있는 경우 0에 0을 표시합니다 Minute = "0"+Minute; } if (sec } g2d.clearRect (-xclock, -yclock, 600,600); // 청소 화면 var s = hour+":"+minute+":"+second+":"+apm; g2d.fillstyle = "빨간색"; g2d.font = d/4+ "px kaiti"; g2d.filltext (s, -d/1.8, d*1.4); g2d.font = d/4 + "px kaiyi"; // gradientvar 생성 gradient = g2d.createlineargradient (0,0, canvas.width, 0); gradient.addcolorstop ( "0", "magenta"); gradient.addcolorstop ( "0.5", "blue"); gradient.addcolorstop ( "1.0", "빨간색"); // 충전 gradientg2d.fillstyle = Gradient; g2d.filltext ( "빅 데이터", -d/2.6, d/2); // 인스턴스 생성 모멘트의 두 번째 판독 값을 얻고 0 초에 비해 초침의 아크 판독 값을 계산하십시오. // 생성 순간의 순간을 읽고 미세한 손의 아크 읽기를 계산하십시오. var b = math.pi/30 * 분;/ * 생성 순간의 시간 읽기를 얻고 0 포인트에 비해 시간 손의 아크 읽기를 계산하고 시간 손의 아크 읽기를 계산하십시오. * 시간 핸드 워크가 시간당 지점 (시간당 30도)이며 전달 된 분의 수정 값*/var a = math.pi/180* (30* hour + minute/2);/* 좌표가 변환 (xclock, yclock)의 수정 값은 좌표가 다이얼 페이스 ()의 센터가되도록 변환됩니다. Drawneedles (A, B, C); } // 메소드 드로우 타임의 코드 블록 끝 var i = 0; function pendulum () {// pendulum_bobvar instantangle = new 배열 (64,61,56,40,40,29,16,3, -8, -16, -29, -40, -49, -56, -61, -64,---- 64, -64, -61, -56, -49, -40, -29, -16, -8,3,16,29,40,49,56,61,64,64); // 진자의 실시간 각도 배열 var c = docum // 랜덤 색상 CTX.FillStyle = 'Brown'으로 초침을 설정합니다. ctx.fillRect (-3,0,6, d*1.4); ctx.shadowblur = 20; ctx.shadowcolor = "black"; ctx.fillstyle = "blue"; // ctx.fillRect (-d/3.5, d*1.35, d/1.6, d/4.4); ctx.font = "40px kaiyi"; // gradientvar gradient = ctx.createlineargradient (0,0, c.width, 0); gradient.addcolorstop ( "0", "magenta"); gradient.addcolorstop ( "0.5", "blue"); graddcolorstop ( "" "" "" Gradient // ctx.fillstyle = Gradient; ctx.fillstyle = "red"; ctx.filltext ( "빅 데이터", -d/3.2, d*1.55); ctx.shadowblur = 0; ctx.shadowColor = null; ctx.fillstyle = null; ctx.rotate (-alpha); } 함수 준비 () {locateCoordinate () setInterVal ( 'drawtime ()', 500); setInterval ( 'pendulum ()', 200);} </script> <style> #mycanvas {z-index : 3; 위치 : 절대; 왼쪽 : 0px; 상단 : 0px; } #mypendulum {z-index : 2; 위치 : 절대; 왼쪽 : 0px; 상단 : 0px;}#ControlPanel {위치 : 절대; 왼쪽 : 600px; 상단 : 0px; 너비 : 100px; 텍스트 정렬 : 센터; Font-Family : "Kaiti"; 글꼴 크기 : 20px; 글꼴 중량 : 대담한; 색상 :#6c0;} </style> </head> <body onload = "reparation ()"> <canvas id = "mycanvas"> <p> 당신의 브라우저는 캔버스 요소를 지원하지 않습니다! </p> </canvas> <canvas id = "mypendulum"> id = "ControlPanel"> <table> <tr> <td> Control </td> <td> 버튼 </td> </tr> <td> <입력 값 = "확대"유형 = "버튼"onclick = "확대 ()" "> </td> <td> <input value ="type = "button" onclick = "reduce ()" "> </button> </td> </tr> <tr> <td> <입력 값 ="왼쪽 "type ="button "onclick ="Westwards () ""> </button> </td> <td> <입력 값 = "right"type = "button"eastwards () "> </td> </td> value = "upwards"type = "button"onclick = "upwards ()"> </button> </td> <td> <입력 값 = "아래쪽"은 "type ="button "onclick ="downwards () "> </button> </td> </table> </div> </body> </html>생식 이미지 :
이 기사가 모든 사람의 웹 프로그래밍에 도움이되기를 바랍니다.