javascript - 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);