如何给移动的球带来旋转的错觉

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'> 表示旋转后的形状。