H5实现手写电子签名

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

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.$store.commit("SET_PAERT_A_IMG", imgBase64)
            }else{
                this.$store.commit("SET_PAERT_B_IMG", imgBase64)
            }
            mui.back();
        }
    }
}

横屏的实现

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