解决方法
一般来说,你想做的是:
>将上下文转换为画布上对象应该旋转的点。
>旋转上下文。
>通过对象内的负偏移为旋转中心转换上下文。
>在0,0处绘制对象。
在代码中:
ctx.save(); ctx.translate( canvasRotationCenterX,canvasRotationCenterY ); ctx.rotate( rotationAmountInRadians ); ctx.translate( -objectRotationCenterX,-objectRotationCenterY ); ctx.drawImage( myImageOrCanvas,0 ); ctx.restore();
这是一个working example显示这在行动。 (旋转的数学只是实验黑客找到一个摆动量和偏移量,弧度,适合快速勾画的表盘。)
可能很明显,您可以用上面步骤#3中的translate调用替换drawImage()调用的偏移量。例如:
ctx.drawImage( myImageOrCanvas,-objectRotationCenterX,-objectRotationCenterY );
当有多个对象在同一位置绘制时,建议使用上下文转换。