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.

还有一些提示......

• 您的资产不应该负责自己(他们的draw()方法).相反,也许定义它们的视觉属性(它是一个圆？半径？)并让你的主渲染功能处理canvas特定的绘图(这也有一个优点,你可以轻松地将你的渲染器切换到常规DOM元素或WebGL的轨道).
• 而不是setInterval(),使用requestAnimationFrame().目前支持不是那么好,所以你可能希望使用setInterval()递归setTimeout()模式来修改其功能.
• 你clearRect()应该从canvas元素传递维度(或者在某处定义它们).将它们包含在渲染功能中类似于幻数,可能会导致维护问题进一步发展.