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

html5动画绘制在前一帧的顶部

1 个答案: