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进一步向下轨道很容易）。
使用requestAnimationFrame()而不是setInterval()。目前支持不是很好，因此您可能希望使用setInterval()或递归setTimeout()模式来填充其功能。
您的clearRect()应该从canvas元素传递维度（或者在某处定义它们）。将它们包含在渲染功能中类似于魔术数字，可能导致维护问题进一步发展。

clearRect不起作用

1 个答案: