前端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）