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

Question

将位于北半球的半圆形图像顶部的表盘旋转，范围可为0-180度。 在传递给执行画布转换的方法的输入中，表盘会旋转并停止在匹配的值上。以下是我基于phrogz 提供的帮助和样例进行尝试的。

- Abhijit

---

可能是Canvas rotate from bottom center image angle?的重复问题。 - Gabriele Petrioli

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

这里有一个可以实际运行的示例，展示了这种方法的效果。(旋转的数学计算只是通过试验来找到适合快速草图标尺盘的振幅和偏移量的弧度。)

显而易见的是，在步骤#3中，您可以用drawImage()调用的偏移量替代translate调用。例如：

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

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

- Phrogz

---

感谢您的快速帮助和演示。 :) - Abhijit

请参见以下重复的问题和答案以进行进一步讨论：HTML5 Canvas drawImage at an angle。 - Phrogz

当涉及替换rotate()方法中的参数以纳入数据结构的反馈时，仍然卡住了。 - Abhijit

@Ab 或许你正在接收角度并将它们传递给 rotate()，但没有先将它们转换为弧度？如果是这样，请乘以 Math.PI/180。如果这不起作用，请编辑你的问题，展示一个简化的测试案例，包含你的实际代码，我们可以从那里开始解决。 - Phrogz

非常感谢，我快要完成了 :) - Abhijit

谢谢，我已经寻找了几个小时了 :-) - Wesley