H5实现手写电子签名

最近的一个项目有关于用户电子合同签名的问题，话不多说直接上代码

<template><div class="page-content"><mf1-header title="用户需求签名"><mf1-button slot="right" @tap="handelClearEl()" type="danger">清除</mf1-button><mf1-button slot="right" @tap="saveImage()" type="danger">保存</mf1-button></mf1-header><div class="sign-content"><div class="div_canvas_container"><canvas id="signCanvas"></canvas></div></div></div></template>

export default {//数字签名name : 'digitaSign',data() {return{imgsrc:""}},mounted() {let vm = this;vm.digitaSignType = vm.$route.query.type;this.$nextTick(()=>{setTimeout(() => {vm.initCanvas()},100)})},methods: {initCanvas(){let rate = 2;let oCanvas = document.getElementById("signCanvas");oCanvas.width = oCanvas.offsetWidth*rate;oCanvas.height = oCanvas.offsetHeight*rate;let cxt = oCanvas.getContext("2d");cxt.fillStyle = "#fff";cxt.fillRect(0, 0, oCanvas.width, oCanvas.height);cxt.lineWidth = 2*rate;cxt.strokeStyle="#101010";let posX = 0; //x坐标let posY = 0; //y坐标let position = null;let parentPosintin = oCanvas.getBoundingClientRect()//手指触摸屏幕可记录此时的位置作为起点oCanvas.addEventListener("touchstart", function(event) {posX = event.changedTouches[0].clientX;posY = event.changedTouches[0].clientY - parentPosintin.top + 0.5;cxt.beginPath();cxt.moveTo(posX*rate, posY*rate);});//手指屏滑动画线oCanvas.addEventListener("touchmove", function(event) {optimizedMove(event);});let requestAnimationFrame = window.requestAnimationFrame;let optimizedMove = requestAnimationFrame ? function(e){requestAnimationFrame(function(){move(e);});} : move;function move(event){posX = event.changedTouches[0].clientX + 0.5;posY = event.changedTouches[0].clientY - parentPosintin.top + 0.5;cxt.lineTo(posX*rate, posY*rate);cxt.stroke();}},// 清除画板handelClearEl() {let oCanvas = document.getElementById("signCanvas");let cxt = oCanvas.getContext("2d");cxt.clearRect(0, 0, oCanvas.width, oCanvas.height);},//保存为图片saveImage() {let oCanvas = document.getElementById("signCanvas");let imgBase64 = oCanvas.toDataURL();this.imgsrc = imgBase64;if(this.digitaSignType == "partyA"){this.$mit("SET_PAERT_A_IMG", imgBase64)}else{this.$mit("SET_PAERT_B_IMG", imgBase64)}mui.back();}}}</script>

<style lang="scss">.div_canvas_container {// margin-top: 1.35rem;width: 100vw;height: 100vh;overflow: hidden;}#signCanvas{width: 100%;height: 100%;background: #FFFFFF;border: none;box-sizing: border-box;overflow: hidden;}</style>

横屏的实现

if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {oCanvas.width = oCanvas.offsetWidth*rate;oCanvas.height = oCanvas.offsetHeight*rate;} else if (/(Android)/i.test(navigator.userAgent)) {//Android终端oCanvas.width = oCanvas.offsetHeight*rate;oCanvas.height = oCanvas.offsetWidth*rate;}

ps：感觉有点诡异，横屏以后 苹果手机不需要任何改变，安卓手机需要把高度赋给宽度，不知道是什么原因，只是这样可以实现效果