小程序canvas签字，旋转后，画布的内容也旋转了

Question

背景：有个需求是支付宝小程序横屏签字，但是奈何支付宝小程序不支持横屏，只能手机自动横屏
解决方案：我的设想是给签字画面都旋转90度，这样引导用户横屏签字

问题： 我给包裹canvas的父盒子旋转90度之后，画布的确横过来了，但是我在上面绘画的时候，我画横线他展示的是旋转90度，成了竖线，求解

下面是我的代码：

    <view class="content">
        <canvas ref="cxt" id="xfCanvas" class="xfcanvas" :style="{ width: getHeight, height:canvasw-102+'px'}"
            @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" :disable-scroll="true" />
        <view class="btn">
            <view @click="resetImg">重签{{getHeight}}</view>
            <view @click="signDate">签日期</view>
        </view>
    </view>

旋转的样式==========================
    .content {
        height: 100vh;
        overflow: hidden;
        background-color: #ccc;
        transform: rotate(90deg);
        transform-origin: bottom left;
        position: absolute;
        top: -100vw;
        height: 100vw;
        width: 100vh
    }


    .xfcanvas {
        height: 100%;
        background-color: white;
        background-color: pink;
    }

下面是我绘图的几个事件

touchStart(e) {
                console.log('+++++++++++刚开始触摸');
                this.startX = e.changedTouches[0].x;
                this.startY = e.changedTouches[0].y;
                this.ctx.beginPath();
                this.ctx.setStrokeStyle('#000'); // 颜色
                this.ctx.setLineWidth(8); // 粗细
                this.ctx.setLineCap('round'); // 线头形状
                this.ctx.setLineJoin('round'); // 交叉处形状
            },
            touchMove(e) {
                console.log('+++++++++++触摸进行中');
                let moveX = e.changedTouches[0].x;
                let moveY = e.changedTouches[0].y;
                this.ctx.moveTo(this.startX, this.startY); // 找到起点
                this.ctx.lineTo(moveX, moveY); // 找到终点
                this.ctx.stroke(); // 描绘路径
                this.startX = moveX;
                this.startY = moveY;
                this.ctx.draw(true, function(ret) {});
            },
            touchEnd() {
                console.log('+++++结束啦', this.ctx);
            },

求解 ，或者有没有别的好法子，可以支付宝横屏签字

Answer 1

这个貌似不需要旋转. 只需要 让这个canvas 长宽比变一下, 看着像横屏就可以了. 在哪划, 就在哪个坐标出图像.

现在的问题应该是css转了90度. 但this.ctx没有反向转90度.