Блог

Я рисую анимированные круги внутри холста, и до сих пор мне удавалось перемещать их слева направо внутри холста. Что мне нужно сделать, так это, когда круг достигнет своего крайнего правого положения, заставить его снова начать свой путь (слева направо), но в положении ниже. Я пытаюсь изменить его положение y, по крайней мере, на диаметр круга, но пока безуспешно. Есть какие-нибудь идеи о том, как я могу этого достичь? Лучше ли сделать это частью анимации или сделать движение влево-вправо простым циклом с изменением положения y в конце? Мой код до сих пор выглядит следующим образом:

 var canvas3 = document.getElementById("canvas3");

canvas3.width = 300;
canvas3.height = 500;

var c3 = canvas3.getContext("2d");

var radius = 13;
var x = radius;
var y = radius;

var dx = 1;
var dy = 0;

function animate3() {
  requestAnimationFrame(animate3);

  c3.clearRect(0, 0, 300, 500);

  if (x   radius > 300 || x - radius < 0) {
    dx = 0;
    y   y;
  }

  if (y   radius > 500 || y - radius < 0) {
    dy = 0;
  }

  x  = dx;
  y  = dy;

  c3.beginPath();
  c3.arc(x, y, 12, 0, Math.PI * 2, false);
  c3.stroke();
  c3.fillText(5, x - 3, y   3);
}

animate3();
 

Я бы просто сбросил x позицию и увеличил y ее таким образом :

 var canvas3 = document.getElementById("canvas3");

canvas3.width = 300;
canvas3.height = 500;

var c3 = canvas3.getContext("2d");

var radius = 13;
var x = radius;
var y = radius;

var dx = 5;
var dy = 0;

function animate3() {
  requestAnimationFrame(animate3);

  c3.clearRect(0, 0, 300, 500);

  if (x   radius > 300 || x - radius < 0) {
    x = radius;
    y  = radius;
  }

  if (y   radius > 500 || y - radius < 0) {
    y = radius;
  }

  x  = dx;
  y  = dy;

  c3.beginPath();
  c3.arc(x, y, 12, 0, Math.PI * 2, false);
  c3.stroke();
  c3.fillText(5, x - 3, y   3);
}

animate3(); 

 <canvas id="canvas3"/>