画布 - 清除rect不起作用

Question

我想从画布的顶部到底部移动一个矩形。但不知何故画布没有被清除。有什么问题？

js fiddle

JS

(function animloop(){
  requestAnimFrame(animloop);
  redraw();
})();


    function redraw() {

        ctx.clearRect(0,0,canvasWidth, canvasHeight);
        ctx.rect(20,y,50,50);
        ctx.fillStyle="red";
        ctx.fill(); 
        y += 2;

    }

Answer 1

它已被清除，但你没有开始新的路径，因此旧的不断被重新绘制。

添加：

ctx.beginPath();

在redraw()函数中。

您可能还想查看

• What exactly is a canvas path, and what is the use of ctx.closePath()?
• Canvas consumes a lot of memory

和/或类似。