이 기사에서는 캔버스를 사용하여 참조 시계를 그리는 특정 코드를 공유했습니다. 특정 내용은 다음과 같습니다
1. clock.html
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta name = "description"content = ""> <title> canvas clock </title> </head> <canvas id = "canvas"> </canvas> <script> var canvas = document.getlementelement ( "canvas"); var context = canvas.getContext ( '2d'); //그리다(); 함수 draw () {// 현재 시스템의 시간, 분 및 두 번째를 얻습니다. var now = new Date (); var sec = now.getSeconds (); var min = now.getminutes (); var hour = now.gethours (); 시간> = 12 && (시간 = 시간 -12); var radius = math.min (canvas.width/2, canvas.height/2); // 캔버스 컨텍스트 초기화 .Save (); context.clearRect (0,0, Canvas.Width, Canvas.Height); context.translate (canvas.width/2, canvas.height/2); context.rotate (-math.pi/2); context.save (); // 테이블 박스 // 시간 스케일 컨텍스트 .Strokestyle = "black"; Context.FillStyle = "Black"; context.linewidth = 3; context.linecap = "round"; context.beginpath (); for (var i = 0; i <12; i ++) {context.rotate (math.pi/6); context.moveto (반경 -30,0); context.lineto (Radius-10,0); } context.stroke (); Context.Restore (); context.save (); // minute scale context.linewidth = 2; context.beginpath (); for (var i = 0; i <60; i ++) {if (! i%5 == 0) {context.moveto (Radius-15,0); context.lineto (Radius-10,0); } context.rotate (math.pi/30); } context.stroke (); Context.Restore (); context.save (); // Hour Hand Context.rotate ((Math.pi/6)*Hour+(Math.pi/360)*min+(Math.pi/21600)*sec); context.linewidth = 6; context.beginpath (); context.moveto (-10,0); context.lineto (반경*0.5,0); Context.Stroke (); Context.Restore (); context.save (); context.rotate ((Math.pi/30)*min+(Math.pi/1800)*sec); context.strokestyle = "#29a8de"; context.linewidth = 4; context.linecap = "butt"; context.beginpath (); context.moveto (-20,0); context.lineto (반경*0.7,0); Context.Stroke (); Context.Restore (); context.save (); context.rotate (sec*math.pi/30); context.strokestyle = "빨간색"; context.linewidth = 2; context.linecap = "butt"; context.beginpath (); context.moveto (-30,0); context.lineto (반경*0.9,0); Context.Stroke (); Context.Restore (); context.save (); context.linewidth = 4; context.strokestyle = "Grey"; context.beginpath (); context.arc (0,0, 반경, 0, math.pi*2, true); Context.Stroke (); Context.Restore (); Context.Restore (); Context.Restore (); } window.onload = function () {setInterval (draw, 1000)} </script> </body> </html>2. JavaScript 코드
<cript> var canvas = document.getElementById ( "canvas"); var context = canvas.getContext ( '2d'); //그리다(); 함수 draw () {// 현재 시스템의 시간과 분을 얻습니다. var now = new Date (); var sec = now.getSeconds (); var min = now.getminutes (); var hour = now.gethours (); 시간> = 12 && (시간 = 시간 -12); var radius = math.min (canvas.width/2, canvas.height/2); // 캔버스 컨텍스트를 초기화합니다 .Save (); context.clearRect (0,0, Canvas.Width, Canvas.Height); context.translate (canvas.width/2, canvas.height/2); context.rotate (-math.pi/2); context.save (); // 테이블 박스 // 시간 스케일 컨텍스트 .Strokestyle = "black"; Context.FillStyle = "Black"; context.linewidth = 3; context.linecap = "round"; context.beginpath (); for (var i = 0; i <12; i ++) {context.rotate (math.pi/6); context.moveto (반경 -30,0); context.lineto (Radius-10,0); } context.stroke (); Context.Restore (); context.save (); // minute scale context.linewidth = 2; context.beginpath (); for (var i = 0; i <60; i ++) {if (! i%5 == 0) {context.moveto (Radius-15,0); context.lineto (Radius-10,0); } context.rotate (math.pi/30); } context.stroke (); Context.Restore (); context.save (); // Hour Hand Context.rotate ((Math.pi/6)*Hour+(Math.pi/360)*min+(Math.pi/21600)*sec); context.linewidth = 6; context.beginpath (); context.moveto (-10,0); context.lineto (반경*0.5,0); Context.Stroke (); Context.Restore (); context.save (); context.rotate ((Math.pi/30)*min+(Math.pi/1800)*sec); context.strokestyle = "#29a8de"; context.linewidth = 4; context.linecap = "butt"; context.beginpath (); context.moveto (-20,0); context.lineto (반경*0.7,0); Context.Stroke (); Context.Restore (); context.save (); context.rotate (sec*math.pi/30); context.strokestyle = "빨간색"; context.linewidth = 2; context.linecap = "butt"; context.beginpath (); context.moveto (-30,0); context.lineto (반경*0.9,0); Context.Stroke (); Context.Restore (); context.save (); context.linewidth = 4; context.strokestyle = "Grey"; context.beginpath (); context.arc (0,0, 반경, 0, math.pi*2, true); Context.Stroke (); Context.Restore (); Context.Restore (); Context.Restore (); } window.onload = function () {setInterval (draw, 1000)} </script>위의 내용은이 기사에 관한 모든 것입니다. 모든 사람들이 JavaScript 프로그래밍을 배우는 것이 도움이되기를 바랍니다.