HTML5 画布以一定角度绘制图像

我正在尝试动画<canvas>并且无法弄清楚如何以一定角度绘制图像。所需的效果是像往常一样绘制几幅图像，其中一幅图像缓慢旋转。 （该图像不在屏幕中心，如果这有什么区别的话）。

在绘制要旋转的图像之前，您需要修改变换矩阵。

假设 image 指向 HTMLImageElement 对象。

var x = canvas.width / 2;
var y = canvas.height / 2;
var width = image.width;
var height = image.height;

context.translate(x, y);
context.rotate(angleInRadians);
context.drawImage(image, -width / 2, -height / 2, width, height);
context.rotate(-angleInRadians);
context.translate(-x, -y);

x、y 坐标是画布上图像的中心。