使用HTML5canvas – 旋转关于任意点的图像

将旋钮转到半圆（北半球）图像的顶部作为背景。 范围可以是0-180度。 在input到进行canvas转换的方法上时，表盘将旋转并停止在匹配的值上。 这是我正在尝试基于帮助和样品由phrogz传递

Answer 1

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

1. 将上下文转换为对象应旋转的canvas上的点。
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(); 

下面是一个正在运行的实例 。 （旋转的math只是在实验上被黑了，以find适合快速绘制的表盘的弧度和弧度偏移。）

可能很明显，您可以将以上第3步中的translate调用replace为drawImage()调用的偏移量。 例如：

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

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