Offset equivalent to translate then rotate

Question

The goal is to find what vx and vy must be so the two codes below are equivalent.

//this is the behaviour I want
ctx.translate(x,y);
ctx.rotate(angle);
ctx.fillRect(0,0,10,10);

//find vx and vy so both this below is equivalent to above
var vx = ?;
var vy = ?;
ctx.rotate(angle);
ctx.fillRect(0 + vx, 0 + vy,10,10);

Answer 1

答案是反过来旋转这个点。

Tk.rotatePt.x = function(x,y,rad_angle,anchorX,anchorY){
    return Math.cos(rad_angle) * (x-anchorX) - Math.sin(rad_angle) * (y-anchorY) + anchorX;
}
Tk.rotatePt.y = function(x,y,rad_angle,anchorX,anchorY){
    return Math.sin(rad_angle) * (x-anchorX) + Math.cos(rad_angle) * (y-anchorY) + anchorY;
}

var vx = Tk.rotatePt.x(x,y,-angle,0,0);
var vy = Tk.rotatePt.y(x,y,-angle,0,0);