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

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

一般来说,你想要做的是:

  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议使用上下文转换。