清除矩形不工作

我正在用 javascript 做一个 Pong 游戏，以便学习制作游戏，并且我想让它面向对象。

我无法得到clearRect上班。它所做的只是画一条越来越长的线。 这是相关代码：

function Ball(){
    this.radius = 5;
    this.Y = 20;
    this.X = 25;
    this.draw = function() {
        ctx.arc(this.X, this.Y, this.radius, 0, Math.PI*2, true);
        ctx.fillStyle = '#00ff00';
        ctx.fill();
    };
}

var ball = new Ball();

function draw(){
    player.draw();
    ball.draw();
}

function update(){
    ctx.clearRect(0, 0, 800, 400);
    draw();
    ball.X++;
}

我试过把ctx.clearRect部分于draw() and ball.draw()功能，但不起作用。 我也尝试过fillRect与白色，但它给出相同的结果。 我怎样才能解决这个问题？

Your real问题是你没有关闭你的圈子的路径。

Add ctx.beginPath()在画圆之前。

jsFiddle.

另外，一些提示...

• 你的资产不应该负责绘制自己（他们的draw()方法）。相反，也许定义它们的视觉属性（是圆吗？半径？）并让你的主渲染函数处理canvas特定的绘图（这还有一个优点，您可以轻松地将渲染器切换到常规 DOM 元素或 WebGL）。
• 代替setInterval(), use requestAnimationFrame()。目前支持还不是很好，因此您可能需要使用以下命令来填充其功能setInterval()或递归setTimeout()图案。
• Your clearRect()应传递尺寸canvas元素（或在某处定义它们）。将它们包含在渲染函数中类似于神奇的数字并可能导致进一步的维护问题。