移动端（vue）横竖屏签名

第一次接触这个移动端签名，知道用canvas但是canvas不精通。所以canvas的代码是找的别人的，本来想附上之前的链接的但是找不到了，抱歉。

你能点进来说明你目前也被这个问题困扰着，我以我个人的理解说一下思路。

大家都会怎么去签名，但是问题就在横屏和竖屏的问题上。

1、先写好横屏和视屏的样式（横屏的时候正常布局就行，不用竖着布局，只是页面的宽高变化了，样式上不会有太大的影响的），2、用canvas的时候页面加载完成后回初始化canvas容器，当页面点击进去的时候是竖屏，横屏的时候初始化的canvas宽高会不符合横屏，这时候我们要判断，横竖屏转换的时候重新加载页面，这样初始化出来的canvas容器是符合我们当前屏幕的，也不用去考虑用户手机有没有锁定竖屏，或者是没有锁定竖屏（横屏）。

3、监听手机有没有横竖屏切换

mounted(){
    this.lineCanvas({
      el: this.$refs.canvas,//绘制canvas的父级div
      clearEl:  this.$refs.clearCanvas,//清除按钮
      saveEl:  this.$refs.saveCanvas,//保存按钮
    });
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", this.resize, false);
  },

resize(){
      location.reload()
},

 

lineCanvas(obj) {
      this.