HTML5 动画绘制在上一帧之上

html5 animation draws on top of previous frame

本文关键字：一帧 动画 绘制 HTML5      更新时间：2023-09-26

我正在尝试学习一些有关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(); 
}

如果您不想重叠，则必须清除画布。

context.clearRect(0, 0, canvas.width, canvas.height);
相关文章：