Смещение эквивалентно переводу и повороту

Question

Цель состоит в том, чтобы найти, какие vx и vy должны быть, чтобы два приведенных ниже кода были эквивалентны.

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