H5前端实现移动端⼿写Canvas签名（横竖屏）
移动端下业务需要全屏⼿写签名，需求：兼容横竖屏，⽆论横竖屏下，签字图都需要是横向显⽰
这⾥直接⽤，主要记录踩坑：
⼀实现效果：
思路分析：
1. 移动H5虽可以判断横竖屏，但考虑到多设备访问问题(微信下，有的⼿机需要⽤户开启横屏模式才可以旋转，⼀般⼈不知道怎么设置），所以强制横屏显⽰只能放弃。一月到十二月的英文
2. ⽆法强制横屏，那么我们是否可以通过CSS将页⾯旋转达到视觉横屏效果呢？ 答案当然是可以，通过 transform: rotate(90deg) 即可实现。
3. 通过transform可以将页⾯旋转，但是会⾯临新的问题：canvas画布旋转后会导致落笔精度丢失，如果你是⼿写canvas可以通过计算X，Y调整落笔，由于笔者采⽤插件，所以只能另寻思路。
4. 不能旋转canvas区域，那么我们只旋转按钮和⽂字提⽰区域，绘图canvas区域通过css媒体查询判断横竖屏，赋值不同得宽⾼，这样来达到视觉上得强制横屏。
踩坑记录：
1 . 移动端屏幕旋转，canvas触控点失灵，签名位置错乱
解决⽅案不唯⼀，
⾸先canvas的⽗容器(class='recruit-canvas')固定定位在body下，默认宽⾼继承body，100%；
其次，定位canvas采⽤定位，脱离⽂档流，动态设定宽⾼即可(宽⾼设置⽆效看踩坑三)
2 . 安卓微信下，⽹页⽆法旋转，IOS下⽹页旋转正常
ios⼿机权限⾼于微信，所以微信**旋转⽅向**默认开启跟随系统
android⼿机下，微信默认关闭旋转跟随系统，打开设置步骤：我的-设置-通⽤-开启横屏模式(跟随系统旋转)
3 . canvas赋值宽⾼⽆效
canvas.style.width/height 与 canvas.width/height 设置不同，
单独设置canvas.width/height前提需要在html标签中初始化默认width,height属性；
单独设置canvas.style.width/height，需要在后⾯添加'px'单位，否则失效；
备注：实际测试中Google chrome，发现不设置属性依然可以设置canvas.width/height，可能与兼容性有关
实现⽅式：
⽅式两种：区别在于⽤户感知
1. 通过size或ientation判断横屏竖屏状态，设置对应宽⾼ - ⽆感知
2. 监听size, 重新加载reload - 有感知，页⾯会刷新
( 兼容横竖屏，最终⽣成是横屏效果图 )
// 部分布局html，详情实现请看 DEMO
<template>
<div class='recruit-canvas'>
<div class="canvas-box" ref="canvasRef" v-show="!previewImage">
<canvas ref="canvasMapRef" id="canvas-map" width="100" height="100"></canvas>
</div>
<div class="btn-box flex-row">
<span class="del-btn" @click="clearCanvasHandle">清除</span>
<span class="sure-btn" @click="makeCanvasHandle">确认</span>
</div>
</div>
西班牙语学习入门<img v-show="previewImage" class="preview-image" :src="previewImage" alt="⽣成预览"> </div>
</template>
<style lang='css' scoped>
.recruit-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.recruit-canvas .preview-image {
position: absolute;
top: 50%;
left: 50%;
z-index: 999;
transform: translate(-50%, -50%);
茄子的英文单词}
.recruit-canvas .canvas-box,
.recruit-canvas .btn-box {
position: absolute;
top: 50%;
z-index: 100;
}
.recruit-canvas .btn-box {
left: -22%;
z-index: 1000;
中印士兵发生肢体冲突
text-align: center;jonny deep
transform: rotate(90deg);jinlin
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
在线反译-
moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
秋季护肤}
.recruit-canvas .btn-box .del-btn,
.recruit-canvas .btn-box .sure-btn {
display: inline-block;
width: 100px;
height: 24px;
margin: 0 10px;
line-height: 24px;
党员年度个人总结border-radius: 6px;
background-color: #fff;
}
.recruit-canvas .btn-box .del-btn {
color: #FF5E00;
}
.recruit-canvas .btn-box .sure-btn {
color: #fff;
background: linear-gradient(100deg, #FF4E01 0%, #FFBC01 100%);
}
.recruit-canvas .canvas-box {
left: 22%;
中英文在线翻译height: 80vh;
width: 70vw;
overflow: hidden;
border: 1px dashed #D4D4D4;
transform: translateY(-50%);
background-color: #fff;
}
.recruit-canvas .canvas-box #canvas-map {
.recruit-canvas .canvas-box #canvas-map { width: 100%;
height: 100%;
}
@media screen and (orientation: portrait) {
/*竖屏 css*/
}
@media screen and (orientation: landscape) { /*横屏 css*/
.recruit-canvas .canvas-box {
top: 20px;
left: 10%;
width: 80vw;
height: 70vh;
transform: translateY(0);
}
.
recruit-canvas .btn-box {
width: 60%;
left: 20%;
top: 86%;
transform: rotate(0);
}
}
</style>
特别感谢： ，，
