通常,您要执行的操作是:
在代码中:
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 );
当您在同一位置绘制多个对象时,建议使用上下文转换。