在画布上使用旋转矩阵旋转等边三角形

Question

所以我很确定我在这里对数学的某个地方进行了大量的研究，因为它在纸上检查出来......但是......我的三角形正在从页面上旋转哈哈。我想要做的是永远逆时针旋转一个等边三角形，原点（三角形的中心，即三条线，从每个顶点到中间一条，它们相遇的地方就是我定义三角形中心的方式）不动。所以这是我的数学总结，以防这里有错误：

v1(x1,y1),v2(x2,y2),和v3(x3.y3)代表三角形中的顶点。首先我计算三角形的中心：x=(x1+x2+x3)/3, y=(y1+y2+y3)/3。接下来，我通过从每个顶点中减去中心的值来创建三个新顶点。然后我将每个新顶点乘以旋转矩阵 30 度，并将中心添加到新旋转顶点。

我已尽力阅读并确保它有意义。

这是我的代码：

function calcVerts() {
    var xOrig = (x1 + x2 + x3)/3;
    var yOrig = (y1 + y2 + y3)/3;
    
    x1 -= xOrig;
    x2 -= xOrig;
    x3 -= xOrig;
    y1 -= yOrig;
    y2 -= yOrig;
    y3 -= yOrig; 

    x1 = (x1 * Math.cos(-(1/6)*Math.PI)) - ((Math.sin(-(1/6)*Math.PI))*y1);
    y1 = (x1 * Math.sin(-(1/6)*Math.PI)) + ((Math.cos(-(1/6)*Math.PI))*y1);
    x2 = (x2 * Math.cos(-(1/6)*Math.PI)) - ((Math.sin(-(1/6)*Math.PI))*y2);
    y2 = (x2 * Math.sin(-(1/6)*Math.PI)) + ((Math.cos(-(1/6)*Math.PI))*y2);
    x3 = (x3 * Math.cos(-(1/6)*Math.PI)) - ((Math.sin(-(1/6)*Math.PI))*y3);
    y3 = (x4 * Math.sin(-(1/6)*Math.PI)) + ((Math.cos(-(1/6)*Math.PI))*y3);
    
    x1 += xOrig;
    x2 += xOrig;
    x3 += xOrig;
    y1 += yOrig;
    y2 += yOrig;
    y3 += yOrig; 
}
function drawScreen() {
    context.clearRect(0, 0, context.canvas.width, context.canvas.height); //clear canvas before each repaint
    
    // the triangle
    context.beginPath();
    context.moveTo(x1, y1);
    context.lineTo(x2, y2);
    context.lineTo(x3, y3);
    context.closePath();
    base++;
    // the outline
    context.lineWidth = 10;
    context.strokeStyle = '#666666';
    context.stroke();
    
    calcVerts();
}

theCanvas = document.getElementById("myCanvas");
context = theCanvas.getContext("2d");
var speed = 5;
var base = 400;
var height = 346.4;
var x1 = base-200;
var x2 = base-400;
var x3 = base;
var y1 = height-346.4;
var y2 = height;
var y3 = height;

function drawLoop() {
    window.setTimeout(drawLoop, 500);
    drawScreen();
}
drawLoop();

<div align="center">
    <canvas id="myCanvas" width="500" height="500"></canvas>
</div>

EDIT1： 由于 Jason 发现了错字，我不再旋转页面，而是三角形在每次旋转时都在缩小。编辑：y3 = (x4 * Math.sin(-(1/6)*Math.PI)) + ((Math.cos(-(1/6)*Math.PI))*y3); 至 y3 = (x3 * Math.sin(-(1/6)*Math.PI)) + ((Math.cos(-(1/6)*Math.PI))*y3);

Answer 1

它们工作得很好，但你错过了一点。 （和 x4）。

   x1 = (x1 * Math.cos(-(1/6)*Math.PI)) - ((Math.sin(-(1/6)*Math.PI))*y1);
   y1 = (x1 * Math.sin(-(1/6)*Math.PI)) + ((Math.cos(-(1/6)*Math.PI))*y1);
   x2 = (x2 * Math.cos(-(1/6)*Math.PI)) - ((Math.sin(-(1/6)*Math.PI))*y2);
   y2 = (x2 * Math.sin(-(1/6)*Math.PI)) + ((Math.cos(-(1/6)*Math.PI))*y2);
   x3 = (x3 * Math.cos(-(1/6)*Math.PI)) - ((Math.sin(-(1/6)*Math.PI))*y3);
   y3 = (x3 * Math.sin(-(1/6)*Math.PI)) + ((Math.cos(-(1/6)*Math.PI))*y3);

您更新了x1、x2、x3 的值，但之后再次使用它。

你必须使用相同的缓冲区，降低你的数学并更新如下值：

var x1_ = (x1 * Math.cos(-(1/6)*Math.PI)) - ((Math.sin(-(1/6)*Math.PI))*y1),
    y1_ = (x1 * Math.sin(-(1/6)*Math.PI)) + ((Math.cos(-(1/6)*Math.PI))*y1),
    x2_ = (x2 * Math.cos(-(1/6)*Math.PI)) - ((Math.sin(-(1/6)*Math.PI))*y2),
    y2_ = (x2 * Math.sin(-(1/6)*Math.PI)) + ((Math.cos(-(1/6)*Math.PI))*y2),
    x3_ = (x3 * Math.cos(-(1/6)*Math.PI)) - ((Math.sin(-(1/6)*Math.PI))*y3),
    y3_ = (x3 * Math.sin(-(1/6)*Math.PI)) + ((Math.cos(-(1/6)*Math.PI))*y3);

x1 = x1_;
x2 = x2_;
x3 = x3_;
y1 = y1_;
y2 = y2_;
y3 = y3_;