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

当您在同一位置绘制多个对象时,建议使用上下文转换.