您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

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

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

通常,您要执行的操作是:

代码中:

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

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

其他 2022/1/1 18:22:34 有447人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶