Question

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

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

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

这是我的代码：

＆＃13;

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();

＆＃13;

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

＆＃13;

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

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

1 个答案: