前端canvas手写签名
最近遇到一个需求，签合同的时候在移动端上客户要手写签名，然后把签名生成的图片传给后端，技术栈react
步骤一：基础实现代码如下
技术点大致解析：
1. document.querySelector('canvas').toDataURL() ， 提交的时候把签名过的canvas转成base64格式转给后端。
2. e.touches[0].pageX 、e.touches[0].pageY 获取当前手指触电坐标。
但到这一步后，出现的问题如下，此时的canvas是默认的宽高 width：300，height: 150,如果想要按照设计稿自定义宽高，则手指触点的位置失效。
解决方法：后来百度了一下，在js里面设置
不用写单位，默认px
2. 清空canvas的内容
调用.clearRect方法~四个参数（x起始坐标，y起始坐标，消除的宽度，消除的高度）
3. 判断canvas内容是否为空（建一个空白的canvas对比一下，空返回true，不空返回false）