如何給移動的球帶來旋轉的錯覺

Question

 //draw method
 draw() {
     //draw the ball
     ctx.beginPath();
     ctx.arc(this.xPos, this.yPos, this.radius, 0, 2 * Math.PI), false;
     ctx.moveTo(this.xPos, this.yPos);
     var i;
     //use a for loop 
     for (i = 1; i < 8; i++) {
         var x = this.radius * Math.cos(i * 2 / 7 * Math.PI) + this.xPos;
         var y = this.radius * Math.sin(i * 2 / 7 * Math.PI) + this.yPos;
         ctx.lineTo(x, y);
         ctx.moveTo(this.xPos, this.yPos);
     }

     ctx.lineTo(this.xPos, this.yPos);
     ctx.fillStyle = "rgba(125, 125, 125, 1)";
     ctx.strokeStyle = "red";
     ctx.fill();
     ctx.stroke();
 }

我是圖形編程的新手，我想知道如何使用旋轉方法將圓中的所有線（由繪制方法創建）移動固定數量的弧度

這是輸出的圖像：

Answer 1

有更有效的方法來解決這個問題，但它們需要像 webgl 或 webgpu 這樣的東西，所以只是為了得到你想要的：

這是二維旋轉矩陣：

將theta參數添加到您的 draw 方法中，並且在 draw 參數之外，在循環的每次迭代中將其增加少量，例如 0.001（記住在繪制之前清除畫布）。

然后在您的方法內部，計算圓的中心C 圍繞其質心C '旋轉任何形狀的公式是：

R(theta) * (S - C) + C

其中 S 是形狀中所有點的集合，R(theta) 是在 theta 處評估的旋轉矩陣。

換句話說，對於側手翻中的每一對 (x, y) 坐標，您首先減去中心，然后將結果向量 <x, y> 乘以從左（R * V）的旋轉矩陣，最后矢量 <x', y'> 表示旋轉后的形狀。