Javascript 当创建两个以上的球时，画布中的反弹球表现出奇怪的行为

下面是我的脚本部分，我从一个在线教程中编辑，如果我有两个球，它工作正常，但如果有两个以上的球，它不能按预期工作

script.js

var context;
var x=0;var y=0;var dx=3;var dy=7;
var x_1=150;var y_1=250;var dx_1=7;var dy_1=3;
var x_2=200;var y_2=200;var dx_2=6;var dy_2=4;
var x_3=350;var y_3=350;var dx_3=4;var dy_3=6;

function init()
{
  context= myCanvas.getContext('2d');
  setInterval(draw,10);
}

function draw()
{
  context.clearRect(0,0, 500,500);
  context.beginPath();
  context.fillStyle="#0000ff";

  context.arc(x,y,10,0,Math.PI*2,true);
  context.arc(x_1,y_1,10,0,Math.PI*2,true);
  context.arc(x_2,y_2,10,0,Math.PI*2,true);
  context.arc(x_3,y_3,10,0,Math.PI*2,true);
  context.closePath();

  context.fill();

  boundaryLogic();

function boundaryLogic() 
{
  if (x < 0 || x > 500) dx = -dx;
  if (y < 0 || y > 500) dy = -dy;
  x += dx;
  y += dy;

  if (x_1 < 0 || x_1 > 500) dx_1 = -dx_1;
  if (y_1 < 0 || y_1 > 500) dy_1 = -dy_1;
  x_1 += dx_1; 
  y_1 += dy_1;

  if (x_2 < 0 || x_2 > 500) dx_2 = -dx_2;
  if (y_2 < 0 || y_2 > 500) dy_2 = -dy_2;
  x_2 += dx_2;
  y_2 += dy_2;

  if (x_3 < 0 || x_3 > 500) dx_3 = -dx_3;
  if (y_3 < 0 || y_3 > 500) dy_3 = -dy_3;
  x_3 += dx_3;
  y_3 += dy_3;
}

var上下文；
var x=0；var y=0；var-dx=3；var-dy=7；
var x_1=150；变量y_1=250；var dx_1=7；var dy_1=3；
var x_2=200；var y_2=200；var dx_2=6；var dy_2=4；
var x_3=350；变量y_3=350；var dx_3=4；var dy_3=6；
函数init（）
{
context=myCanvas.getContext（'2d'）；
设置间隔（抽签，10）；
}
函数绘图（）
{
clearRect（0,050500）；
context.beginPath（）；
context.fillStyle=“#0000ff”；
弧（x，y，10，0，Math.PI*2，true）；
弧（x_1，y_1,10,0，Math.PI*2，true）；
弧（x_2，y_2,10,0，Math.PI*2，true）；
弧（x_3，y_3,10,0，Math.PI*2，true）；
closePath（）；
context.fill（）；
边界逻辑（）；
函数边界逻辑（）
{
如果（x<0 | | x>500）dx=-dx；
如果（y<0 | | y>500）dy=-dy；
x+=dx；
y+=dy；
如果（x|u 1<0|x|u 1>500）dx_1=-dx_1；
如果（y|u 1<0 | y|u 1>500）dy|u 1=-dy|u 1；
x_1+=dx_1；
y_1+=dy_1；
如果（x|u2<0 | x|u2>500）dx|u2=-dx|u2；
如果（y|u2<0 | y|u2>500）dy|u2=-dy|u2；
x_2+=dx_2；
y_2+=dy_2；
如果（x|u3<0 | x|u3>500）dx|u3=-dx|u3；
如果（y|u3<0 | y|u3>500）dy|u3=-dy|u3；
x_3+=dx_3；
y_3+=dy_3；
}

---

如果我对任意两个context.arc调用进行注释，球会很好地反弹，但是当两个以上的调用相同时，球会以某种奇怪的模式显示，而不是作为单个球来显示

您需要通过为每个圆调用

beginPath（）

和

fill（）

或使用

moveTo（）来中断球之间的路径

在不留下路径的情况下从一个跳到下一个

context.beginPath();
context.arc(x,y,10,0,Math.PI*2,true);
context.fill();
context.beginPath();
context.arc(x_1,y_1,10,0,Math.PI*2,true);
context.fill();
context.beginPath();
context.arc(x_2,y_2,10,0,Math.PI*2,true);
context.fill();
context.beginPath();
context.arc(x_3,y_3,10,0,Math.PI*2,true);
context.fill();

演示：

---

改进的演示：

有一条不可见的线连接它们。只有当球之间有三个或更多的形状时，才可见。