Drehen eines Punktes in HTML-Canvas

Question

Ich versuche, einige grundlegende Vektor Mathe zu lernen, aber ich kann nicht scheinen, diese Methode zum Drehen eines Punktes zu erhalten. Die Größe der gedrehten Vektoren skaliert hoch und ich weiß nicht, was mit dem Winkel los ist.

Hier ist die relevante Funktion. Ich arbeite in 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)}; 
} 

Hier ist ein jsbin of the weird result

Answer 1

Die Funktion fast richtig ist, aber sie sind nur mit dem modifizierten x-Wert 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)}; 
}