在画布javascript中开发的乒乓球游戏的问题

我有一个方形球的乒乓球游戏，我想把它变成圆形球。然而，当我尝试这样做时，我会得到一条线，沿着我的乒乓球。有人能帮我解决这个问题吗

代码：

        // Draw the Ball
        if (Pong._turnDelayIsOver.call(this)) {
            ///// Square code
            /*this.context.fillRect(
                this.ball.x,
                this.ball.y,
                this.ball.width,
                this.ball.height
            );*/

            ////round code
            this.context.arc(this.ball.x, this.ball.y, this.ball.width, 0, 2 * Math.PI);
            this.context.stroke();
            this.context.fill();
        }

        // Draw the net (Line in the middle)
        this.context.beginPath();
        this.context.setLineDash([7, 15]);
        this.context.moveTo((this.canvas.width / 2), this.canvas.height - 140);
        this.context.lineTo((this.canvas.width / 2), 140);
        this.context.lineWidth = 10;
        this.context.strokeStyle = '#ffffff';
        this.context.stroke();

编辑：“正确答案是OP应该在调用

ctx.arc

上方添加

ctx.beginPath（）

”。感谢@Blindman67指出这一点

（原始答案供参考：在开始绘制第二个形状之前，您很可能错过了对

this.context.closePath（）

的调用（否则，球和网将以相同的形状绘制，这将导致第二张图片中出现的问题） )

---

干杯

感谢上帝，你花了时间来帮助我，工作得很好。因为答案是非常错误的。幸运的是，这条近路让神器消失了

closePath（）

添加线段，但不清除当前路径。它与

beginPath

（清除当前路径）不同，球和网仍然渲染两次，但没有连接线段。正确答案是OP应该在调用

ctx.arc

.My bad@Blindman67上方添加

ctx.beginPath（）

。我更新了答案，以避免在网站上保留不正确的信息。