第一次接触这个移动端签名,知道用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.