[ 자바스크립트 ] canvas ─ 벽시계

최종 수정일 : 2015 년 11월 12일

출처 : www.w3schools.com (영문)

<canvas> 태그를 이용하여, 벽시계를 만드는 함수이다.
위의 사이트에서 복사해온 것이며, 시계판의 전체적인 크기와 색깔 부분만 변경하였다. ─ 굵은 글씨으로 표시된 부분.
그 외에는, ,,, 현재의 실력으로는, 변경 불가함. ... ─.─;;

자세한 설명은 아래 링크를 참고하기 바람.
☞ 아날로그 시계 개요

<canvas> 태그가 적용되는 브라우저 버전은 아래와 같다.

9.0	2.0	4.0	9.0	3.1

<canvas> 태그가 적용되지 않는 브라우저를 사용중이라면, 아래 문서를 참고하시길. ...

☞ [자바스크립트] 구버전용 벽시계

---

사용중인 브라우저에서는 canvas 태그가 적용되지 않습니다.

 
<div style="margin: 0 auto; text-align: center; background-color: #366; width: 140px; height: 140px;">
       <canvas id="myClock" width="130" height="130" style="background-color: transparent">
       사용하시는 브라우저에서는 canvas 태그가 적용되지 않습니다. 
      </canvas>
</div>
 

 
<script type="text/javascript"> 

var canvas = document.getElementById( "myClock" ); 


// "getContext"를 적용할 수 있는, 최신 버전에서만 실행하도록, if문으로 변경함. 
if ( canvas.getContext ){ 
        var context = canvas.getContext( "2d" ); 
        var radius = canvas.height / 2; 

        context.translate( radius, radius ); 
        radius = radius * 0.90; 

        drawClock(); // drawClock() 함수를 바로 실행하기. 
        setInterval ( drawClock, 1000 ); // 1초에 한번씩 drawClock() 함수 재실행. 
} 


function drawClock (){ 

        drawFace( context, radius ); 
        drawNumbers( context, radius ); 
        drawTime( context, radius ); 
} 


// 시계판 만들기. 
function drawFace ( context, radius ){ 

        context.beginPath(); 
        context.arc( 0, 0, radius, 0, 2*Math.PI ); 
        context.fillStyle = "#366"; // 숫자판 (문자판)의 색  
        context.fill(); 

        var grad = context.createRadialGradient( 0, 0, radius*0.95, 0, 0, radius*1.05 ); 

        grad.addColorStop( 0, "#cdb" ); // 시계 바늘 & 시계 테두리의 안쪽 
        grad.addColorStop( 0.5, "#cdd" ); // 시계 테두리의 색 
        grad.addColorStop( 1, "#899" ); // 시계 테두리의 바깥쪽 

        context.strokeStyle = grad; 
        context.lineWidth = radius * 0.07; // 테두리의 두께  
        context.stroke(); 
        context.beginPath(); 
        context.arc( 0, 0, radius*0.05, 0, 2*Math.PI ); // 시계 정중앙, 원의 크기  
        context.fillStyle = "#cdd"; // 시계 정중앙, 원 & 글자의 색  
        context.fill(); 
}


// 시계판용 숫자 만들기. 
function drawNumbers ( context, radius ){ 

        context.font = ( radius * 0.15 ) + "px Arial"; // 글꼴 & 크기  
        context.textBaseline = "middle"; 
        context.textAlign = "center"; 

        for ( var number = 1; number <= 12; number++ ){ 
                var angle = ( number * Math.PI ) / 6; 
                context.rotate( angle ); 
                context.translate( 0, -radius*0.85 ); 
                context.rotate( -angle ); 
                context.fillText( number.toString(), 0, 0 ); 
                context.rotate( angle ); 
                context.translate( 0, radius*0.85 ); 
                context.rotate( -angle ); 
        } 
} 


// 시침, 분침, 초침용 변수값을 설정한 후, 
// 각각의 변수값을 drawHand() 함수에 적용하여, 
// 시계바늘 만들기. 
function drawTime ( context, radius ){ 

        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 / 360 ) + ( second * Math.PI / 21600 ); 

        // minute 
        minute = ( minute * Math.PI / 30 ) + ( second * Math.PI / 1800 ); 

        // second 
        second = ( second * Math.PI ) / 30; 

        // 각 바늘의 길이와 두께만 변경함 
        drawHand( context, hour, radius*0.53, radius*0.07 ); 
        drawHand( context, minute, radius*0.74, radius*0.06 ); 
        drawHand( context, second, radius*0.83, radius*0.03 ); 
} 


// 시계바늘을 만들기 위한 함수 drawHand(). 
function drawHand ( context, position, length, width ){ 

        context.beginPath(); 
        context.lineWidth = width; 
        context.lineCap = "round"; 
        context.moveTo( 0, 0 ); 
        context.rotate( position ); 
        context.lineTo( 0, -length ); 
        context.stroke(); 
        context.rotate( -position ); 
} 

</script>
 

이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요. *^^*