为什么画布停止清除矩形？

Question

我尝试为画布中的简单对象设置动画，并在开始时起作用，但过了一段时间，它会停止清除矩形并继续填充新的矩形。至少我认为它停止清除也许是另一回事。谁能帮我？没有控制台错误。

var canvas = document.querySelector('canvas');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var c = canvas.getContext('2d');

var x=100;
function animate() {
    requestAnimationFrame(animate);
    c.clearRect(0,0,window.innerHeight,window.innerWidth);
    c.beginPath();
    c.fillRect(x,100,100,100);
    x+=2;
}
animate();

body{
    margin: 0;
}
canvas{
    background: orange;
}

<canvas></canvas>

Answer 1

正如 @Al.G 在评论中指出的，您的height和width参数在调用中是相反的clearRect()。交换它们c.clearRect(0, 0, window.innerWidth, window.innerHeight);将解决问题。

我通常会使用canvas.width和canvas.height来清除非画布属性，例如window.innerWidth和window.innerHeight，因为canvas属性将始终与其尺寸相匹配，减少对外部/全局变量的依赖，并且不需要除此之外的思考。

var canvas = document.querySelector('canvas');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var c = canvas.getContext('2d');
var x = 100;

function animate() {
    requestAnimationFrame(animate);
    c.clearRect(0, 0, canvas.width, canvas.height);
    c.beginPath();
    c.fillRect(x, 100, 100, 100);
    x += 2;
}

animate();

body {
    margin: 0;
}
canvas {
    background: orange;
}

<canvas></canvas>