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