Canvas，改变动画对象的运动

Question

所以我现在有 2 个物体在移动，圆圈和正方形。除了正方形的移动外，它们都运行良好。它的旋转半径很小，而圆的半径较大。

我不确定到底要操纵什么代码来更改方块，因为我所有的修补都没有任何作用。

这是我为他们两人设置的动作。我一直试图镜像它们，但无济于事。

function setupCircles() {
for (var i = 0; i < 25; i++) {
    var randomX = Math.round(-200 + Math.random() * 700);
    var randomY = Math.round(-200 + Math.random() * 700);
    var speed = .2 + Math.random() * 3;
    var size = 5 + Math.random() * 100;
    var radius = 5 + Math.random() * 100;

    var circle = new Circle(radius, speed, size, randomX, randomY);
    circles.push(circle);
}
drawAndUpdate();
}
setupCircles();

function setupSquares() {
for (var i = 0; i < 25; i++) {
    var randomX = Math.round(-100 + Math.random() * 700);
    var randomY = Math.round(-100 + Math.random() * 700);
    var speed = .2 + Math.random() * 3;
    var size = 5 + Math.random() * 100;
    var radius = 2 + Math.random() * 100;

    var square = new Square(radius, speed, size, randomX, randomY);
    squares.push(square);
}
drawAndUpdate();
}
 setupSquares();

也供参考，这是对象本身

  function Circle(radius, speed, width, xPos, yPos) {
  this.radius = radius;
  this.speed = speed;
  this.width = width;
  this.xPos = xPos;
  this.yPos = yPos;
  this.opacity = .1 + Math.random() * .5;

  this.counter = 0;

  var signHelper = Math.floor(Math.random() * 2);

  if (signHelper == 1) {
    this.sign = -1;
  } else {
    this.sign = 1;
  }
  }

 function Square(radius, speed, width, xPos, yPos) {
 this.speed = speed;
 this.width = width;
 this.xPos = xPos;
 this.yPos = yPos;
 this.opacity = .1 + Math.random() * .5;

this.counter = 0;

var signHelper = Math.floor(Math.random() * 2);

if (signHelper == 1) {
    this.sign = -1;
} else {
    this.sign = 1;
}
}

Answer 1

看起来你在方块的更新中遗漏了 *this.radius，如果没有它，你的方块将围绕一个很小的圆圈移动，以至于无法察觉到移动，那行代码应该是：

mainContext.fillRect(this.xPos + Math.cos(this.counter / 100) *this.radius, this.yPos + Math.sin(this.counter / 100)*this.radius, 50, 50);

这是更新后的 fiddle：https://jsfiddle.net/z8L6fsn2/1/

Canvas，改变动画对象的运动

Canvas, changing movement of animated objects

canvas

move

radius

shape