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

Question

在半圆形(北半球)图像上旋转表盘作为背景。 范围可以是 0 - 180 度。 在输入到进行 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();

这是一个 working example在行动中展示这一点。 (旋转的数学只是通过实验破解，以找到适合快速绘制的仪表盘的摆动量和弧度偏移量。)

很明显，您可以将上面第 3 步中的 translate 调用替换为 drawImage() 调用的偏移量。例如:

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

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