javascript - Canvas - 清除矩形不起作用

Question

我想将一个矩形从 Canvas 的顶部移动到底部。但不知怎的， Canvas 并没有被清除。怎么了？

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

和/或类似的。