Javascript clearRect不工作

为了学习制作游戏，我正在用javascript做一个乒乓球游戏，我想让它面向对象

我无法让

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（）

和

ball.draw（）

函数中，但它不起作用。 我还尝试了使用白色的

fillRect

，但结果相同。 我怎样才能解决这个问题？

你真正的问题是你没有关闭你的圈的路径

在绘制圆之前添加

ctx.beginPath（）

还有，一些提示

• 您的资产不应负责绘制自身（其

  draw（）

  方法）。相反，可以定义它们的视觉属性（是圆吗？半径？），并让主渲染函数处理

  画布

  特定的图形（这还有一个优点，即您可以轻松地将渲染器切换到常规DOM元素或WebGL）
• 使用，而不是

  setInterval（）

  。目前支持还不是很好，因此您可能希望使用

  setInterval（）

  或递归

  setTimeout（）

  模式来填充其功能
• 您的

  clearRect（）

  应该从

  canvas

  元素传递维度（或者在某处定义它们）。将它们包含在渲染函数中类似于幻数，可能会导致后续维护问题

---

你能在JSFIDLE上设置它来帮助解释画一条更长的线吗？我之前试过，但在那里无法使用，我会再试一次。我不知道如何使用JSFIDLE，javascript中没有任何内容。我在那里保存了代码，也许你可以让它工作：哇，这出乎意料地简单。这段代码到底做了什么？我是说clearRect的“viewport.width=viewport.width”部分解释了它自己，我不知道另一段代码做了什么来清除画布。谢谢你的提示@这有点像黑客。基本上，它依赖于

画布

渲染器在其维度发生变化时清除其内容。好的，我明白了，现在我添加了beginPath clearRect再次工作，我实际上有begin和closePath，但删除了它们以查看它是否破坏了任何内容（在圆移动之前）因为没什么变化，我就这样离开了：P。你知道什么是最好的表现吗？clearRect，用颜色填充还是破解？@hustlerinc IIRC，破解速度较慢。这也是一种黑客行为，因此我坚持使用

clearRect（）

。你也可以像约翰·卡马克那样使用，但这在今天的计算机上是不必要的（除了笑话，跟踪所有对象的位置并只渲染差异可能会很有趣）。