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在评论中指出的那样，您的tostring()和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;
}

Answer 2

我只会在此处添加此内容，因为已接受的答案意外地解决了您的问题。

问题在于您颠倒了clearRect的参数；

您做到了：

c.clearRect(0,0,window.innerHeight,window.innerWidth);

答案是：

c.clearRect(0,0,window.innerWidth,window.innerHeight);

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

2 个答案: