HTMLキャンバスでポイントを回転する

Question

私は基本的なベクトル計算を学ぼうとしていますが、この方法を使ってポイントを回転させることはできません。回転したベクトルの大きさはスケールアップされており、角度がどうなっているのか分かりません。

ここに関連する機能があります。私はjavascript/HTML canvasで作業しています。

function rotate(point, center, angle) { 
    var theta = (Math.PI/180) * angle, 
     cX = center.pos.x, 
     cY = center.pos.y, 
     pX = point.pos.x, 
     pY = point.pos.y, 
     pCos = Math.cos(theta), 
     pSin = Math.sin(theta), 
     x = pX - cX, 
     y = pY - cY; 
    x = (x * pCos - y * pSin) + cX; 
    y = (x * pSin + y * pCos) + cY; 
    return {x: Math.floor(x), y: Math.floor(y)}; 
} 

はここjsbin of the weird result

Answer 1

の機能はほとんど正しいですが、あなただけのy

function rotate(point, center, angle) { 
    var theta = (Math.PI/180) * angle, 
     cX = center.pos.x, 
     cY = center.pos.y, 
     pX = point.pos.x, 
     pY = point.pos.y, 
     pCos = Math.cos(theta), 
     pSin = Math.sin(theta), 
     x = pX - cX, 
     y = pY - cY; 
    /* You had 
    x = (x * pCos - y * pSin) + cX; // you change x on this line 
    y = (x * pSin + y * pCos) + cY; /// then used the modified x to get y 
    */ 
    // this will fix the problem 
    var xx = (x * pCos - y * pSin) + cX; 
    var yy = (x * pSin + y * pCos) + cY; 
    return {x: Math.floor(xx), y: Math.floor(yy)}; 
}