Canvas를 사용하여 시계 애니메이션을 만드는 방법-JS 튜토리얼-php.cn

　 Javascript부터 Canvas까지 지식 포인트를 검토하다가 Canvas를 사용하여 그린 정적 시계의 예를 보고 이를 시스템 시간을 동적으로 표시하는 시계 애니메이션으로 바꾸고 싶었습니다. 게다가 디지털 디스플레이 시계와 함께 소형 시계 모듈이 탄생했습니다! 현재 인터페이스는 간단한 인터페이스와 애니메이션 효과만 있을 뿐 아직 상대적으로 투박합니다.

이 시계에는 애니메이션 디스크 시계와 디지털 시계의 두 부분이 포함되어 있습니다. 첫 번째는 시간 초과를 사용하여 setTimeout() 메서드를 호출하여 시간을 표시하는 루프 애니메이션 효과를 만드는 것입니다. 먼저 디지털 시계의 코드를 살펴보겠습니다. 디스크 시계도 디지털 시계를 모방하여 만들어졌습니다.

var ntimeoutId = setTimeout(ntimeOut,0);function ntimeOut() {
    clearTimeout(ntimeoutId);    
    var now = new Date();    
    var hours = now.getHours().toString(),
        minutes = now.getMinutes().toString(),
        seconds = now.getSeconds().toString();    
        var time = hours+" : "+minutes+" : "+seconds;    
        var timep = document.getElementById("time");
    timep.innerHTML = time;
    ntimeoutId = setTimeout(ntimeOut, 1000);
}

로그인 후 복사

　　1. 먼저 시스템의 현재 시간을 표시하기 위해 처음으로 메소드를 호출하는 타임아웃 호출을 설정합니다. 시간을 0으로 설정한 이유는 지연 없이 시간을 표시하기 위해서입니다. .

2. 각 루프 이전에 이전 타임아웃 호출을 클리어합니다. (왜 이렇게 하는지 아직 모르겠네요??? 메모리 성능과 관련이 있을 수 있습니다. 코멘트 달고 나면 프로그램이 정상적으로 실행됩니다.)

　3. 현재 시스템 시간을 가져와 특정 문자열 형식으로 저장합니다.

　4. 페이지에 동적으로 표시하기 위해 Html 페이지에 빈 p 요소를 정의하여 시간 문자열을 저장합니다. DOM 조작을 사용하여 p 요소에 추가하여 동적으로 표시합니다.

　　5. 타임아웃 호출을 지속적으로 반복하면 디지털 시계가 동적으로 표시될 수 있으며 개발자 도구를 통해 p 요소의 동적 변화도 볼 수 있습니다.

다음 단계는 디스크 시계 애니메이션을 만드는 것입니다. 디스크와 숫자 값의 묘사는 비교적 간단합니다. context.arc() 메서드와 context.fillText() 메서드를 사용하면 됩니다. 다음은 소스 코드입니다.

　　　　 context.beginPath();
        context.restore();
        context.translate(0,0);
        context.clearRect(0,0,300,300);        //绘制时钟内外边框
        context.arc(150,150,149,0,2 * Math.PI,false);
        context.moveTo(295,150);
        context.arc(150,150,145,0,2 * Math.PI,false);

        context.font = "bold 18px Arial";
        context.textAlign = "center";        //绘制时钟表盘数值
        context.fillText("12",150,25);
        context.fillText("3",285,150);
        context.fillText("6",150,290);
        context.fillText("9",15,150);
        context.fillText("1",215,45);
        context.fillText("2",265,95);
        context.fillText("4",265,225);
        context.fillText("7",95,275);
        context.fillText("5",215,275);
        context.fillText("8",35,225);
        context.fillText("10",35,95);
        context.fillText("11",75,45);

        context.stroke();
        context.closePath();

로그인 후 복사

　다음 단계는 포인터를 그리는 것입니다. 원점으로 이동한 다음 포인터가 될 경로를 그리는 것이 훨씬 편리합니다. 포인터를 그릴 때 또 다른 어려움은 라디안 계산입니다. 물론 이것은 수학적 문제입니다. 먼저 소스 코드를 살펴보겠습니다.

　　　　 //绘制指针        context.save();
        context.translate(150,150);        //时针
        context.moveTo(0,0);
        hour(hours);        function hour(thour) {
            context.save();            
            var newhour = 0;            
            if(thour>12) {
                newhour = thour-12;
            } else {
                newhour = thour;
            }
            context.rotate((2*Math.PI/12)*newhour);
            context.lineTo(0,-80);
            context.restore();
        }        //分针
        context.moveTo(0,0);
        minute(minutes);        function minute(tminute) {
            context.save();
            context.rotate((2*Math.PI/12)*tminute/5);
            context.lineTo(0,-110);
            context.restore();
        }        //秒针
        context.moveTo(0,0);
        second(seconds);        function second(tsecond) {
            context.save();
            context.fillStyle = "#fff";
            context.rotate((2*Math.PI/12)*tsecond/5);
            context.lineTo(0,-120);
            context.restore();
        }
        
        context.stroke();

로그인 후 복사

포인터 그리기에서 각 유형의 포인터는 포인터 회전의 애니메이션 효과를 얻기 위해 각 포인터 그리기의 호를 변경하는 기능을 사용합니다. 시침의 경우 24시간 시계를 12시간 시계로 변환하고 매번 30°씩 회전시킵니다. 분침과 초침은 0에서 11까지 회전합니다. 나는 모두가 나보다 간단한 수학 문제를 더 잘한다고 믿습니다. 나는 한동안 어려움을 겪었습니다. context.save() 메서드와 context.restore() 메서드는 각 함수에서 초기화 중에 경로를 저장하고 복원하는 데 사용됩니다. 그렇지 않으면 포인터가 궤도를 벗어나게 됩니다.

기본적으로 모든 작업이 준비되었습니다. 다음으로 타임아웃 호출에 시계 다이얼과 포인터만 배치하면 됩니다. 그러나 아직 주의해야 할 몇 가지 문제가 있습니다. 시계 다이얼과 포인터가 다릅니다. 초기화 경로를 복원하려면 저장하고 복원하세요. 그렇지 않으면 시계 다이얼과 바늘이 궤도를 벗어나게 됩니다. 주목해야 할 또 다른 사항은 캔버스를 사용하여 애니메이션을 만들 때 각 애니메이션 주기가 캔버스를 지우고 다시 그려야 한다는 것입니다. 그렇지 않으면 포인터가 계속 회전하여 꽃으로 변합니다.

전체 디스크 시계 코드는 다음과 같습니다.

//显示指针时间var drawing = document.getElementById("drawing");if(drawing.getContext) {    
var context = drawing.getContext("2d");    
var rtimeoutId = setTimeout(roudClock,0);    
function roudClock() {
        clearTimeout(rtimeoutId);

        context.beginPath();
        context.restore();
        context.translate(0,0);
        context.clearRect(0,0,300,300);        //绘制时钟内外边框
                context.arc(150,150,149,0,2 * Math.PI,false);
        context.moveTo(295,150);
        context.arc(150,150,145,0,2 * Math.PI,false);

        context.font = "bold 18px Arial";
        context.textAlign = "center";        //绘制时钟表盘数值
                context.fillText("12",150,25);
        context.fillText("3",285,150);
        context.fillText("6",150,290);
        context.fillText("9",15,150);
        context.fillText("1",215,45);
        context.fillText("2",265,95);
        context.fillText("4",265,225);
        context.fillText("7",95,275);
        context.fillText("5",215,275);
        context.fillText("8",35,225);
        context.fillText("10",35,95);
        context.fillText("11",75,45);

        context.stroke();
        context.closePath();        
        var now = new Date();        
        var hours = now.getHours(),
            minutes = now.getMinutes(),
            seconds = now.getSeconds();        //绘制指针        
            context.save();
        context.translate(150,150);        //时针
                context.moveTo(0,0);
        hour(hours);        
        function hour(thour) {
            context.save();            
            var newhour = 0;            
            if(thour>12) {
                newhour = thour-12;
            } else {
                newhour = thour;
            }
            context.rotate((2*Math.PI/12)*newhour);
                        context.lineTo(0,-80);
            context.restore();
        }        //分针
        　　 context.moveTo(0,0);
        minute(minutes);        
        function minute(tminute) {
            context.save();
            context.rotate((2*Math.PI/12)*tminute/5);
            context.lineTo(0,-110);
            context.restore();
        }        //秒针
                context.moveTo(0,0);
        second(seconds);        
        function second(tsecond) {
            context.save();
            context.fillStyle = "#fff";
            context.rotate((2*Math.PI/12)*tsecond/5);
            context.lineTo(0,-120);
            context.restore();
        }
        
        context.stroke();
        context.restore();
        context.translate(0,0);
        context.save();
        rtimeoutId = setTimeout(roudClock,1000);
    }    
}

로그인 후 복사

마지막으로 이 데모 연습 중에 직면한 문제를 요약합니다.

1. 캔버스 다시 그리기 문제

포인터 애니메이션이 반복되면 이전 경로를 지울 수 없으므로 각 루프에 표시가 남습니다. 작은 범위에서 ClearRect() 메서드를 사용해 보았으나 해당 범위 내에서 다이얼과 숫자의 내용만 지울 수 있고 포인터에는 여전히 흔적이 남는다는 사실을 발견했습니다. 나중에 검색을 통해 얻은 답은 캔버스를 사용하여 애니메이션을 만들 때 새 콘텐츠를 그리기 전에 캔버스 콘텐츠를 지워야 하며 모든 애니메이션 변경 사항을 지워야 한다는 것이었습니다. 다시 그리는 방법은 링크를 참조하세요. 저는 전체 캔버스를 지우기 위해 ClearRect() 메서드를 사용합니다.

　2. save() 메소드와 Restore() 메소드 사용

내 시계 다이얼과 포인터의 원점 설정이 다르기 때문에 다시 그리면 시계 다이얼의 원점은 의 원점으로 변경됩니다. 포인터는 원점이므로 save() 메서드와 Restore() 메서드를 사용하여 변경합니다. 이 장소 외에도 사용해야 하는 다른 장소도 있습니다. 작업 후 설정이 변경되지만 후속 작업에는 원래 설정을 사용해야 하는 상황에 적합합니다. 이 두 가지 방법은 콘텐츠가 아닌 설정만 저장하고 복원한다는 점에 유의하세요.

　3.translate() 메소드 사용

　translate() 메소드는 변환 작업에 속하며 캔버스의 기본 원점은 캔버스의 왼쪽 상단에 있습니다. . 이 방법을 사용하면 포인터의 경로를 더 쉽게 그릴 수 있습니다. 물론 아직 다루지 않은 다른 용도도 있습니다.

　4. setTimeout() 메소드 사용

타임아웃 호출을 사용하는 것이 간헐적 호출보다 더 나은 방법입니다. 타임아웃 호출이 전달되는 함수 내에 타임아웃 호출을 추가하면 루프를 훌륭하게 시뮬레이션할 수 있습니다. 함수의 일부 조건에 따라 루프 수와 시간을 제한할 수도 있습니다.

　5. 현시점에 맞춰 라디안 사용법

　이 문제는 수학적 문제인데 원리를 이해하면 별 문제가 아닙니다. 기술적 문제.

　　6. 시간 방식의 반복 획득 및 재사용 문제에 대해

　 코드에 중복된 코드가 있는 상황에 대해서는 중복성을 줄이는 더 좋은 방법이 생각나지 않았습니다. 예를 들어 획득 시간의 경우 두 번의 타임아웃 호출에 반복되는 정의가 있지만 전역적으로 배치하면 애니메이션 효과가 없고 로딩이 완료된 후 정적 시간만 표시됩니다. 또 한가지는 포인터의 함수 설정에 반복되는 부분이 있다는 점인데, 하나의 함수 메소드로 결합해서 호출할 수 있나요?

누구나 아이디어를 내고, 부족한 점을 제안하고, 함께 소통할 수 있습니다.

위 내용은 Canvas를 사용하여 시계 애니메이션을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!