后台说明：业务需要在支付宝小程序横屏签到，但是目前支付宝不支持横屏，只能用样式引导用户实现效果:idea:使用transform和translate来旋转页面，这样就可以满足样式要求了。好像没有问题，但是你在canvas上画的时候，你会看到我写的是横的，显示的确实是竖的。原因：页面旋转了，但坐标系没有改变解决方法：调整坐标系可以通过rotate旋转90°，然后通过translate平移坐标系。context.rotate((degree*Math.PI)/180);switch(degree){//页面顺时针旋转90°后，画布左上角原点位置落到屏幕右上角（此时宽高互换），之后绕原点逆时针旋转90°，画布垂直于原位置，在屏幕右侧。它需要向左平移与画布当前高度相同的距离。案例-90:context.translate(-height,0);休息;//页面逆时针旋转90°后，画布左上角原点位置落到屏幕左下角（此时宽高互换），时针后旋转90°，画布垂直于原位置，位于屏幕下方，画布需要向上平移与当前画布宽度相同的距离。案例90：context.translate(0,-width);休息;//页面逆时针旋转180°，回到原位（即页面倒置），画布左上角原点位置落到屏幕右下角（此时宽高保持不变），绕原点反方向旋转180°后，画布平行于原位置，位于屏幕右侧下方。它需要向左平移与画布宽度相同的距离，向右平移与画布高度相同的距离。case-180:case180:context.translate(-width,-height);}这是我的代码：52+'px'，宽度：'100%'}"@touchstart="touchStart"@touchmove="touchMove"@touchend="touchEnd":disable-scroll="true">重新签名下一个日期mounted(){letthat=this;uni.getSystemInfo({success:function(res){that.canvasw=res.windowWidth;that.canvash=res.windowHeight;console.log(that.canvasw,that.canvash,'canvassize');that.$nextTick(()=>{that.ctx=uni.createCanvasContext('xfCanvas');//========这里重点是改变坐标系，52的高度就是我操作按钮的高度=============that.ctx.rotate((-90*Math.PI)/180);that.ctx.translate(-that.canvash+that.canvasw+52,0)that.ctx.setStrokeStyle('#000');//给它上色。ctx.setLineWidth(8);//厚度that.ctx.setLineCap('round');//线形that.ctx.setLineJoin('round');//交叉路口形状});},});},methods:{touchStart(e){console.log('++++++++++++刚刚开始触摸');this.startX=e.changedTouches[0].x;this.startY=e.changedTouches[0].y;this.ctx.beginPath();this.ctx.moveTo(this.startX,this.startY);//找到起点},touchMove(e){console.log('+++++++++++Touchinprogress');this.isSign=true让moveX=e.changedTouches[0].x;让moveY=e.changedTouches[0].y;this.ctx.lineTo(moveX,moveY);//找到终点this.ctx.stroke();//绘制路径this.ctx.draw(true,function(ret){});},touchEnd(){this.isSign=trueconsole.log('++++++结束',这个.ctx);},}搞了半天才达到最终的效果，参考了大佬的文档，受益匪浅。
