javascript - 当创建两个以上的球时， Canvas 中的弹跳球会表现出奇怪的行为

Question

以下是我从在线教程中编辑的脚本部分，如果我有两个球，它工作正常，但如果有超过 2 个球，它就无法按预期工作

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;
}

如果我评论任何两个 context.arc 调用，球就会弹跳良好，但是当两个以上的调用相同时，球会以某种奇怪的模式显示，而不是单独的球

Answer 1

您需要断开球之间的路径，方法是为每个圆调用 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();

演示:http://jsfiddle.net/5Mj5U/

改进的演示:http://jsfiddle.net/7nJDV/