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/

画布中的弹跳球在创建两个以上的球时表现出奇怪的行为

1 个答案: