javascript - clearRect 不工作

Question

我正在用 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() 和 ball.draw() 函数中，但它没有工作。我也用白色尝试了 fillRect 但它给出了相同的结果。我该如何解决这个问题？

Answer 1

您真正的问题是您没有关闭您的圈子路径。

在画圆之前添加ctx.beginPath()。

jsFiddle .

此外，还有一些提示......

• 您的 Assets 不应该负责自己绘制(它们的 draw() 方法)。相反，也许定义它们的视觉属性(它是一个圆吗？半径？)并让你的主要渲染函数处理 canvas 特定的绘图(这也有一个好处，你可以将你的渲染器切换到常规 DOM 元素或WebGL 很容易在轨道上走得更远)。
• 代替setInterval()，使用requestAnimationFrame() .目前支持不是很好，因此您可能希望使用 setInterval() 或递归 setTimeout() 模式来填充它的功能。
• 您的 clearRect() 应该从 canvas 元素传递尺寸(或在某处定义它们)。将它们包含在您的渲染函数中类似于魔数(Magic Number)，可能会导致后续的维护问题。