HTML5에서 애니메이션을 그리는 방법은 무엇입니까? (코드 예)

이 글의 내용은 HTML5에서 애니메이션을 그리는 방법에 관한 것입니다. (코드 예)에는 특정 참고 값이 있습니다. 도움이 필요한 친구가 참고할 수 있기를 바랍니다.

캔버스 API는 애니메이션을 지원하는 방법을 직접 제공하지는 않지만 그 자체로는 캔버스에서 애니메이션 효과를 구현하는 것이 매우 간단합니다. 캔버스를 지속적으로 업데이트하고 다시 그리기만 하면 됩니다. 이러한 지속적인 업데이트와 다시 그리기를 애니메이션 루프라고 하며 모든 애니메이션의 핵심 로직입니다.

캔버스에서 애니메이션을 구현하려면 먼저 캔버스의 개체를 초기화해야 합니다. 그런 다음 캔버스를 업데이트하고, 캔버스를 지우고, 캔버스를 다시 그린 다음, 다음 새 애니메이션 프레임을 요청하는 애니메이션 루프를 시작합니다.

다음으로 간단한 예시를 통해 캔버스 애니메이션의 구현 과정을 살펴보겠습니다. 이 예에서는 애니메이션 방식으로 회전하는 Bagua 차트를 구현합니다. 코드는 다음과 같습니다.

function clear() {  
   context.clearRect(0, 0, canvas.width, canvas.height);
}
function rotate() {
   context.rotate(Math.PI/30);  // 每分钟旋转一周
}
function draw () {
    // 绘制白色半圆
   context.beginPath();
   context.arc(0, 0, 80, 1.5*Math.PI, Math.PI/2, false);
   context.fillStyle = "white";
   context.closePath();
   context.fill();
           
   // 绘制黑色半圆
   context.beginPath();
   context.arc(0, 0, 80, Math.PI/2, 1.5*Math.PI, false);
   context.fillStyle = "black";
   context.closePath();
   context.fill();
           
    // 绘制黑色小圆
    context.beginPath();
    context.arc(0, 40, 40, 0, Math.PI*2, true);
    context.fillStyle = "black";
    context.closePath();
    context.fill();
           
    // 绘制白色小圆
    context.beginPath();
    context.arc(0, -40, 40, 0, Math.PI*2, true);
    context.fillStyle = "white";
    context.closePath();
    context.fill();
           
    // 绘制白色小圆心
    context.beginPath();
    context.arc(0, -40, 5, 0, Math.PI*2, true);
    context.fillStyle = "black";
    context.closePath();
    context.fill();
           
    // 绘制黑色小圆心
    context.beginPath();
    context.arc(0, 40, 5, 0, Math.PI*2, true);
    context.fillStyle = "white";
    context.closePath();
    context.fill();
}
function drawStage() {
     rotate();  // 更新
     clear();   // 清除
     draw();    // 重绘
}
window.onload = function(){
    canvas = document.getElementById('canvas');
    context = canvas.getContext('2d');
          
    context.translate(canvas.width/2, canvas.height/2);
          
    setInterval(drawStage, 100);
};

위 코드는 페이지가 로드되면 먼저 초기화된 후 setInterval(drawStage, 100) 메서드를 호출하여 애니메이션 주기에서 drawStage() 함수를 시작합니다. 애니메이션 효과를 얻기 위해 캔버스 업데이트, 캔버스 지우기, 캔버스 다시 그리기를 실행하기 위해 100ms마다 호출됩니다. 실행 결과는 그림 4-37에 나와 있습니다.

물론 이는 애니메이션의 원리를 보여주기 위한 것일 뿐이므로 예제는 비교적 간단합니다. 실제로 Canvas의 애니메이션은 매우 간단할 수도 있고 매우 복잡할 수도 있습니다. 단순하든 복잡하든 기본 원리는 동일합니다.

위는 HTML5에서 애니메이션을 그리는 방법입니다. (코드 예) 전체 소개, Html5 비디오 튜토리얼에 대해 더 알고 싶다면 PHP 중국어 웹사이트를 주목하세요.

위 내용은 HTML5에서 애니메이션을 그리는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!