API tools faq
paste
Advertisement
asimryu

canvas analog clock

asimryu
Apr 12th, 2023
753
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 3.59 KB | Source Code | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="ko">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>시계</title>
  6.     <style>
  7.         * { box-sizing: border-box; }
  8.         #digital {
  9.             width: 500px;
  10.             padding: 10px;
  11.             background-color: #222;
  12.             color: white;
  13.             text-align: center;
  14.             font-size: 20px;
  15.         }
  16.         canvas {
  17.             width: 500px;
  18.             height: 500px;
  19.             background-color: #333;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <div id="digital"></div>
  25.     <canvas id="clock"></canvas>
  26.     <script>
  27.         let digital = document.getElementById("digital");
  28.         let clock = document.getElementById("clock");
  29.         let weeks = ["일","월","화","수","목","금","토"];
  30.         const showDigital = () => {
  31.             let now = new Date();
  32.             let year = now.getFullYear(); //연도
  33.             let month = now.getMonth() + 1; //월(0~11)
  34.             let today = now.getDate(); //날짜
  35.             let week = now.getDay(); //요일
  36.             let hour = now.getHours();
  37.             let min = now.getMinutes();
  38.             let sec = now.getSeconds();
  39.             let mil = now.getMilliseconds();
  40.             if( month < 10 ) month = "0" + month;
  41.             if( min < 10 ) min = "0" + min;
  42.             if( sec < 10 ) sec = "0" + sec;
  43.             if( mil < 10 ) mil = "00" + mil;
  44.             if( mil >= 10 && mil < 100 ) mil = "0" + mil;
  45.             let time = year + "-" + month + "-" + today + " ";
  46.             time += hour + ":" + min + ":" + sec + "." + mil;
  47.             time += " " + weeks[week] + "요일";
  48.             digital.innerHTML = time;
  49.         }
  50.        
  51.         let canvas = document.getElementById("clock");
  52.         canvas.width = 500;
  53.         canvas.height = 500;
  54.         let ctx = canvas.getContext("2d");
  55.         let r = canvas.width / 2; //반지름
  56.         ctx.translate(r,r); //그리기 시작점을 가운데로 이동
  57.         r = r * 0.9;
  58.  
  59.         const drawBg = () => {
  60.             let grad; //그라데이션용 변수 선언
  61.             ctx.beginPath(); //새로그리기 시작
  62.             ctx.arc(0, 0, r, 0, 2*Math.PI);
  63.             ctx.fillStyle = "white";
  64.             ctx.fill();
  65.             grad = ctx.createRadialGradient(0,0,r*0.95,0,0,r*1.05);
  66.             grad.addColorStop(0,"#333");
  67.             grad.addColorStop(0.5,"white");
  68.             grad.addColorStop(1,"#333");
  69.             ctx.strokeStyle = grad;
  70.             ctx.lineWidth = r*0.1;
  71.             ctx.stroke();
  72.             ctx.beginPath();
  73.             ctx.arc(0,0,r*0.1,0,2*Math.PI);
  74.             ctx.fillStyle = "#333";
  75.             ctx.fill();
  76.             let ang;
  77.             ctx.beginPath();
  78.             ctx.font = r*0.15 + "px arial";
  79.             ctx.textBaseline = "middle"; //위아래 정렬
  80.             ctx.textAlign = "center";//좌우 정렬
  81.             for(num = 1; num<=12; num++) {
  82.                 ang = num * Math.PI / 6;
  83.                 ctx.rotate(ang);
  84.                 ctx.translate(0,-r*0.85);
  85.                 ctx.rotate(-ang);
  86.                 ctx.fillText(num.toString(), 0,0);
  87.                 ctx.rotate(ang);
  88.                 ctx.translate(0, r*0.85);
  89.                 ctx.rotate(-ang);
  90.             }
  91.         }
  92.  
  93.         const drawFace = () => {
  94.             drawBg();
  95.             let now = new Date();
  96.             let h = now.getHours();
  97.             let m = now.getMinutes();
  98.             let s = now.getSeconds();
  99.             let ms = now.getUTCMilliseconds();
  100.             s += ms/1000;
  101.             h = h % 12; //24시간을 12시간으로 변환
  102.             h = h*Math.PI/6;
  103.             h += m*Math.PI/(6*60);
  104.             h += s*Math.PI/(360*60);
  105.             m = m*Math.PI/30;
  106.             m += s*Math.PI/(30*60);
  107.             s = s*Math.PI/30;
  108.             drawHand(h, r*0.5, r*0.07, "black"); //시침
  109.             drawHand(m, r*0.8, r*0.07 ,"red"); //분침
  110.             drawHand(s, r*0.9, r*0.02, "green"); //초침
  111.         }
  112.  
  113.         const drawHand = (pos, l, w, c) => {
  114.             ctx.beginPath();
  115.             ctx.strokeStyle = c || "black";
  116.             ctx.lineWidth = w;
  117.             ctx.lineCap = "round";
  118.             ctx.moveTo(0,0);
  119.             ctx.rotate(pos);
  120.             ctx.lineTo(0, -l);
  121.             ctx.stroke();
  122.             ctx.rotate(-pos);
  123.         }
  124.  
  125.         drawFace();
  126.         showDigital();
  127.         let timer = setInterval(function(){
  128.             showDigital();
  129.             drawFace();
  130.         },1);
  131.     </script>
  132. </body>
  133. </html>
  134. <!-- reference : https://www.w3schools.com/graphics/tryit.asp?filename=trycanvas_clock_start -->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!