javascript - 向内螺旋旋转矩阵

Question

我试图制作一个原地旋转的正方形，但是我的正方形向内螺旋，我不知道为什么。这是代码，如果有人可以解释发生了什么以及为什么它不只是原地旋转。

var angle = 2 * (Math.PI / 180);
var rotate = [
  [Math.cos(angle),Math.sin(angle)],
  [-Math.sin(angle),Math.cos(angle)]
];

var points = [[300,0],[0,300],[-300,0],[0,-300]];
init.ctx.translate(init.canvas.width/2,init.canvas.height/2);


function loop(){
  draw();
}
setInterval(loop,10);

function draw(){
  init.ctx.beginPath();
  init.ctx.moveTo(points[0][0],points[0][1]);
  init.ctx.lineTo(points[1][0],points[1][1]);
  init.ctx.lineTo(points[2][0],points[2][1]);
  init.ctx.lineTo(points[3][0],points[3][1]);
  init.ctx.closePath();
  init.ctx.stroke();
  for(let i=0;i<points.length;i++){
    init.ctx.beginPath();
    init.ctx.fillStyle = "red";
    init.ctx.fillRect(points[i][0],points[i][1],5,5);
    points[i][0] = points[i][0]*rotate[0][0] + points[i][1]*rotate[0][1];
    points[i][1] = points[i][0]*rotate[1][0] + points[i][1]*rotate[1][1];
  }

}

Answer 1

因此，每次调用绘图时，您都会应用一个小旋转，特别是完整旋转的 1/180。问题是你依靠 float 学来给你精确的值，但这并不是因为它没有。这是由通过迭代计算的点数组组成的。我建议通过将当前 Angular 正确旋转矩阵应用到起点来计算通过绘制的每个步骤的新点。

var angle = 0;

var startPoints = [[300,0],[0,300],[-300,0],[0,-300]];
var points = [[300,0],[0,300],[-300,0],[0,-300]];

init.ctx.translate(init.canvas.width/2,init.canvas.height/2);

function loop(){
  draw();
}
setInterval(loop,10);

function draw(){
  init.ctx.beginPath();
  init.ctx.moveTo(points[0][0],points[0][1]);
  init.ctx.lineTo(points[1][0],points[1][1]);
  init.ctx.lineTo(points[2][0],points[2][1]);
  init.ctx.lineTo(points[3][0],points[3][1]);
  init.ctx.closePath();
  init.ctx.stroke();
  angle = angle + Math.PI / 90;
    var rotate = [
      [Math.cos(angle),Math.sin(angle)],
      [-Math.sin(angle),Math.cos(angle)]
    ];
  for(let i=0;i<points.length;i++){
    init.ctx.beginPath();
    init.ctx.fillStyle = "red";
    init.ctx.fillRect(points[i][0],points[i][1],5,5);
    points[i][0] = startPoints[i][0]*rotate[0][0] + startPoints[i][1]*rotate[0][1];
    points[i][1] = startPoints[i][0]*rotate[1][0] + startPoints[i][1]*rotate[1][1];
  }
}