移动端横屏页面造成canvas布局错乱的问题

Question

需求：横屏页面，用户如果没有开启手机自动横屏功能，则让body旋转90度。

点击页面关键字，弹出一张div卡片，卡片内容渲染结束之后转为img，可以在微信端长按保存。

思路：div--html2canvas插件--转成canvas--生成base64--给img的src
问题：body旋转之后canvas内容会错乱

我的想法：body如果没有旋转，canvas的文字排版是正确的，body一旦旋转了，canvas跟着旋转，文字就会错乱。网上看了半天也没有找到原因。希望各位能够提出意见
部分代码：