[javascript] Raphaël을 사용하여 시계를 만드는 방법은 어떻게 되나요?

29 Nov 2023

javascript

먼저 HTML 파일을 만들고 Raphaël 라이브러리를 추가합니다.

<!DOCTYPE html>
<html>
<head>
    <title>Raphael 시계 예제</title>
    <script src="raphael.min.js"></script>
</head>
<body>
    <div id="clock"></div>
    <script src="clock.js"></script>
</body>
</html>

그런 다음 JavaScript 파일을 만들고 clock.js라는 파일에 시계를 그리는 로직을 작성합니다.

window.onload = function() {
    // 시계를 그릴 캔버스 생성
    var paper = Raphael("clock", 300, 300);
    
    // 시계 중심 좌표와 반지름 설정
    var centerX = 150;
    var centerY = 150;
    var radius = 100;
    
    // 시계 둘레 그리기
    var clockCircle = paper.circle(centerX, centerY, radius);
    clockCircle.attr("stroke", "black");
    
    // 시계의 시간을 나타내는 침 그리기
    var hourHand = paper.path("M " + centerX + " " + centerY + " L " + centerX + " " + (centerY - radius * 0.6));
    hourHand.attr("stroke", "black");
    
    var minuteHand = paper.path("M " + centerX + " " + centerY + " L " + centerX + " " + (centerY - radius * 0.8));
    minuteHand.attr("stroke", "black");
    
    var secondHand = paper.path("M " + centerX + " " + centerY + " L " + centerX + " " + (centerY - radius * 0.9));
    secondHand.attr("stroke", "red");
    
    // 시계를 실시간으로 업데이트하는 함수
    function updateClock() {
        var now = new Date();
        var hour = now.getHours() % 12; // 12시간 형식으로 변환
        var minute = now.getMinutes();
        var second = now.getSeconds();
        
        var hourAngle = (360 / 12) * hour; // 시침의 각도 계산
        var minuteAngle = (360 / 60) * minute; // 분침의 각도 계산
        var secondAngle = (360 / 60) * second; // 초침의 각도 계산
        
        // 시침, 분침, 초침을 회전시키는 애니메이션 적용
        hourHand.animate({transform: ["r", hourAngle, centerX, centerY]}, 1000);
        minuteHand.animate({transform: ["r", minuteAngle, centerX, centerY]}, 1000);
        secondHand.animate({transform: ["r", secondAngle, centerX, centerY]}, 1000);
    }
    
    // 1초마다 시계 업데이트
    setInterval(updateClock, 1000);
}

이제 웹 브라우저에서 HTML 파일을 열면 Raphaël을 사용하여 만들어진 시계를 볼 수 있습니다. 시침, 분침, 초침이 실시간으로 업데이트되어 현재 시간을 나타냅니다.

위의 코드는 Raphaël의 기본적인 사용법을 보여줍니다. 시계의 디자인이나 애니메이션을 추가로 사용자 정의할 수도 있습니다. 자세한 내용은 Raphaël 공식 문서를 참조해주세요.