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

这是一个工作示例，展示了这一点的实际效果。 （旋转的数学只是通过实验进行修改，以找到适合快速绘制的仪表盘的摆动量和弧度偏移量。）

很明显，您可以替换步骤 # 中的 translate 调用。上面的 3 条带有 drawImage() 调用的偏移量。例如：

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

当您有多个对象要在同一位置绘制时，建议使用上下文翻译。