Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

moozi

7/3 html5 시계 디버깅 본문

카테고리 없음

7/3 html5 시계 디버깅

moozi 2015. 7. 2. 17:59

<html>
    <head>
        <title>시계</title>
         <script>
            var radius;//전역변수
            var canvas;
            var paint;  
           
            function g(){
                canvas=document.getElementById("myCanvas");
                paint=canvas.getContext("2d"); 
               radius=canvas.height/2;
                paint.translate(radius,radius);//원점(0,0)을 (150,150)으로이동
               
                setInterval(drawClock, 1000);//1초간격으로 호출
            }
            
            function drawClock(){
                paint.fillStyle="white";
                paint.beginPath();
              
                paint.arc(0, 0, radius*0.9, 0 ,2*Math.PI);
                paint.fill();
               
                paint.beginPath();
                paint.arc(0, 0, 15, 0, 2*Math.PI);
                paint.fillStyle = "#000000";
                paint.fill();
               
                //숫자출력
                paint.font = radius*0.1 + "px arial";
                 paint.textBaseline="middle";
                 paint.textAlign="center";
                 for(num= 1; num < 13; num++){
                     ang = num * Math.PI / 6;
                     paint.rotate(ang);
                     paint.translate(0, -radius*0.85);
                     paint.rotate(-ang);
                     paint.fillText(num.toString(), 0, 0);
                     paint.rotate(ang);
                     paint.translate(0, radius*0.85);
                     paint.rotate(-ang);
                }
               
                var now = new Date();
                var hour = now.getHours();
                var minute = now.getMinutes();
                var second = now.getSeconds();
               
                //hour
                hour=hour%12;
                hour=(hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60));
                 drawHand(paint, hour, radius*0.5, radius*0.07);
                //minute
                minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
                drawHand(paint, minute, radius*0.7, radius*0.07);
                // second
                second=(second*Math.PI/30);
                drawHand(paint, second, radius*0.8, radius*0.02);
            }
            
             function drawHand(paint, pos, length, width) {
                paint.beginPath();
                paint.lineWidth = width;
                paint.lineCap = "round";
                paint.moveTo(0,0);
                paint.rotate(pos);
                paint.lineTo(0, -length);
                paint.stroke();
                paint.rotate(-pos);
            }
            
           
            
        </script>
    </head>
  
    <body onLoad="g()">
        <canvas id="myCanvas" width="300" height="300" style="background-color:#dddddd"></canvas>
   
    </body>

</html>

Comments