Question

我需要一个围绕画布边缘移动的圆。向右然后向下移动可以正常工作，但是当它需要向左移动时，它会跳到右下角，然后一次又一次地向右移动。我不知道该如何解决。

  var can = document.getElementById('C4');
  var ctx = can.getContext('2d');
  var x = 5, y = 20;
  ctx.fillStyle = "black";
  ctx.fillRect(700, 100, 100, 100);
  function draw() {
      ctx.beginPath();
      ctx.arc(x, y, 20, 0, 2 * Math.PI);
      ctx.fillStyle = 'rgba(250,0,0,0.4)';
      ctx.fill();
      do {//moving right
          x += 2;
      } while (x <! 281);
      if (x >= 280){//down
          do {
              x = 280;
              y += 2;
          } while (y <! 130);
      }
      if(y >= 130 && x >= 280){//left
          do {
              x = x - 2;
              y = 130;
          } while (x >! 20);
      }
      if (x <= 20) {//up
          do {
              x = 20;
              y = y-2;
          } while (y <! 20);
      }

      ctx.fillStyle = "rgba(34,45,23,0.4)";
      ctx.fillRect(0, 0, can.width, can.height);
      requestAnimationFrame(draw);
  }
  draw();

canvas { border: 1px solid black}

<canvas id="C4"></canvas>

Answer 1

由于您使用的是递归，因此不需要do while，循环只是使圆从一个边跳到另一边。您可以通过以下条件实现目标：

var can = document.getElementById('C4');
  var ctx = can.getContext('2d');
  var x = 5, y = 20;
  ctx.fillStyle = "black";
  ctx.fillRect(700, 100, 100, 100);
  function draw() {
      ctx.beginPath();
      ctx.arc(x, y, 20, 0, 2 * Math.PI);
      ctx.fillStyle = 'rgba(250,0,0,0.4)';
      ctx.fill();

      if (x < 280 && y == 20) {
        x += 2;
      }

      if (x >= 280 && y < 130){//down
          x = 280;
          y += 2;
      }

      if(y >= 130 && x > 20){//left
        x = x - 2;
        y = 130;
      }

      if (x == 20 && y > 20) {//up
        x = 20;
        y = y-2;
      }

      ctx.fillStyle = "rgba(34,45,23,0.4)";
      ctx.fillRect(0, 0, can.width, can.height);
      requestAnimationFrame(draw);
  }
  
  draw();

canvas { border: 1px solid black}

<canvas id="C4"></canvas>

Answer 2

将球隔离为物体。
使用滚珠方向检查方向是否改变。
清除draw函数内部的画布第一行，而不是在draw函数的末尾创建路径。

示例。

  var ctx = canvas.getContext('2d');
  const radius = 20;
  const speed = 2;
  const ball = {
    style: "rgba(250,0,0,0.4)",
    radius: radius,
    pos: {x: radius, y: radius},
    vel: {x: speed, y: 0},
    step() {
        const w = ctx.canvas.width, h = ctx.canvas.height, r = ball.radius;
        var x = ball.pos.x, y = ball.pos.y
        
        if(ball.vel.x === speed && x >= w - r ) {
            ball.vel.x = 0;
            ball.vel.y = speed;
            ball.pos.x = w - r;
        } else if(ball.vel.y === speed && y >= h - r) {
            ball.vel.x = -speed;
            ball.vel.y = 0;
            ball.pos.y = h - r;
        } else if(ball.vel.x === -speed && x <= r) {
            ball.vel.x = 0;
            ball.vel.y = -speed;
            ball.pos.x = r;
        } else if(ball.vel.y === -speed && y <= r) {        
            ball.vel.x = speed;
            ball.vel.y = 0;
            ball.pos.y = r;
        }
        ball.pos.x += ball.vel.x;
        ball.pos.y += ball.vel.y;
    },
    draw() {
        ctx.fillStyle = ball.style;
        ctx.beginPath();
        ctx.arc(ball.pos.x, ball.pos.y, ball.radius, 0, 2 * Math.PI);
        ctx.fill();    
    },
}

             
        
           
  

  function draw() {
      ctx.fillStyle = "rgba(34,45,23,0.4)";
      ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
      ball.step();
      ball.draw();
      requestAnimationFrame(draw);
  }
  draw();

canvas { border: 1px solid black}

<canvas id="canvas"></canvas>

围绕画布边缘移动的圆圈

2 个答案: