使用HTML5画布 - 旋转关于任意点的图像

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

这里显示了动作中的一个working example。 （对于旋转的数学只是实验砍死找到一个摆动量，并在适合快速-草图计表盘弧度偏移。）

由于可能是显而易见的，你可以在上面的步骤＃3替换translate通话抵消drawImage()电话。例如：

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

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