37

在半圆形（北半球）图像上旋转表盘作为背景。范围可以是 0 - 180 度。在输入到进行画布转换的方法时，表盘将旋转并停在匹配的值上。这是我根据phrogz传递的帮助和示例所尝试的

4

1 回答 1

95

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

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

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

于 2011-01-10T18:29:18.270 回答