画布旋转使翻译朝不同的方向发展

Question

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

移动工作正常，直到图像旋转。 旋转后，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();