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

Question

旋转半圆形（北半球）图像顶部的刻度盘作为背景。 范围可以是0 - 180度。 对于进行画布转换的方法的输入，表盘将旋转并停止匹配的值。 以下是我根据phrogz

传递的帮助和示例尝试的内容

Answer 1

一般来说，你想要做的是：

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

这是一个working example，显示了这一点。 （旋转的数学运算只是通过实验性攻击来找到适合快速绘制的仪表盘的摆动量和弧度偏移量。）

很明显，您可以将上面步骤3中的translate电话替换为drawImage()电话的偏移量。例如：

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

如果要在同一位置绘制多个对象，建议使用上下文翻译。