使用HTML5 Canvas-围绕任意点旋转图像

通常，您要执行的操作是：

1. 将上下文转换为画布上对象应旋转的点。
2. 旋转上下文。
3. 通过对象内旋转中心的负偏移来转换上下文。
4. 在0,0处绘制对象。

在代码中：

ctx.save();ctx.translate( canvasRotationCenterX, canvasRotationCenterY );ctx.rotate( rotationAmountInRadians );ctx.translate( -objectRotationCenterX, -objectRotationCenterY );ctx.drawImage( myImageOrCanvas, 0, 0 );ctx.restore();

这是一个实际的示例，展示了这一点。（旋转的数学运算只是实验性地破解，以找到适合快速绘制的仪表盘的摆动量和弧度偏移。）

显而易见的是，您可以将上述

translate

drawImage()

ctx.drawImage( myImageOrCanvas, -objectRotationCenterX, -objectRotationCenterY );

当您在同一位置绘制多个对象时，建议使用上下文转换。