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

Question

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

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，价值，但只是后再次使用它。

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

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