html5 애니메이션이 이전 프레임 상단에 그려집니다.

Question

나는 html5 애니메이션에 대해 조금 배우려고 노력 중이며 다음 코드를 제안했습니다. 문제는 직사각형이 이전 프레임과 겹치기 때문입니다.

결국 사각형 모양의 점을 변경하여 개체 모양을 변경하고 싶습니다.

function animate(){ 
     setInterval(drawCanvas, 40); 

    } 


function drawCanvas(){ 


     var canvas = document.getElementById('c'), context = canvas.getContext('2d'); 

     context.fillStyle = "rgb(250,250,250)"; 

     context.shadowOffsetX = 2; // Sets the shadow offset x, positive number is right 
     context.shadowOffsetY = 2; // Sets the shadow offset y, positive number is down 
     context.shadowBlur = 20; // Sets the shadow blur size 
     context.shadowColor = 'rgba(0, 0, 0, 0.3)'; // Sets the shadow color 
    context.beginPath(); 
    context.moveTo(10,10); 
    context.lineTo(800,10); 
    context.lineTo(800,180); 
    context.lineTo(10,180); 
    context.lineTo(10,10); 
    context.fill(); 
    context.closePath(); 
} 

Answer 1

겹치지 않으려면 캔버스를 지워야합니다.

context.clearRect(0, 0, canvas.width, canvas.height);