畫布，改變動畫對象的運動

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

這裏的更新小提琴：https://jsfiddle.net/z8L6fsn2/1/