如何使用旋转矩阵旋转形状?

时间:2013-03-22 16:01:21

标签: javascript canvas matrix rotation 2d

我正在尝试使用rotation matrix通过javascript在画布上旋转方块。 这是我的代码。

function square() {
    this.cord=[[0,0],[-25,25],[25,25],[25,-25],[-25,-25]];  
}           

var a=new square();

function rotate() {
    var cos=Math.sqrt(2)/2;
    var sin=Math.sqrt(2)/2;
    for(var j=0;j<a.cord.length;j++) { 
        a.cord[j][0]=a.cord[j][0]*cos-(a.cord[j][1])*sin;
        a.cord[j][1]=a.cord[j][1]*cos+(a.cord[j][0])*sin;
    }
}

但奇怪的事情发生了,方块逐渐收缩,不能正确旋转。

我的代码出了什么问题?

1 个答案:

答案 0 :(得分:2)

在计算之前,您需要提取值a.cord[j][0]a.cord[j][1]。您对a.cord[j][1]的计算基于新计算的新值,而不是原始值。

所以:

for(...)
{
    var x = a.cord[j][0];
    var y = a.cord[j][1];

    a.cord[j][0] = x*cos - y*sin;
    a.cord[j][1] = y*cos + x*sin;
}