Javascript 画布旋转使平移朝不同方向移动

我在画布中有一个图像，用户可以使用rotate（）和translate（）方法进行旋转和移动

移动效果良好，直到图像旋转。 旋转后，“平移”将相对于画布的旋转移动画布。。我如何避免这种情况

我在“mousemove”上的代码：

var $canvas  = $('#viewport')[0];
var context  = $canvas.getContext('2d');

// Clear the canvas first
context.clearRect(0, 0, $canvas.width, $canvas.width);
context.save();

// Do any rotating first
// Move to center
context.translate($canvas.width/2, $canvas.height/2);
// Rotate
context.rotate(degrees*Math.PI/180, $canvas.width, $canvas.width);
// Move back to top-left
context.translate(-$canvas.width/2, -$canvas.height/2);

// Move the canvas to dragged point
context.translate(translate_pos.x, translate_pos.y);

// Draw the image
context.drawImage(image, 0, 0, image.width, image.height);

context.restore();

---

你到底想要实现什么？这些操作的顺序似乎有点不直观，你移动到中心，旋转然后向后移动，但既然你旋转了，你就再也不能到达左上角了。你到底想实现什么？这些操作的顺序似乎有点不直观，你移动到中心，旋转，然后向后移动，但是因为你旋转，你就不能再到左上角了。