canvas 实现签名

一、签名功能

签名绘制是最核心的功能，在移动端我们手指就是笔，所以绘制就要用到 touchstart、 touchmove、 touchend 事件，如果在pc端鼠标就是绘笔，绘制就要用到mousedown、mousemove、mouseup事件，这篇文章以移动端为例，pc端原理相同，只是触发事件不一样。

基本思路是先初始化绘制的DOM元素后，通过touch事件获取当前的clientX和clientY坐标值，然后通过Canvas的绘制路径的api来绘制经过的路径，每执行完一次touch事件把当前的画布记录下来供后面的撤销等功能用。

何为裁剪功能呢？之前的功能不管是预览还是保存，我们在吧canvas画布转化为图片时，图片大小为canvas画布的大小，当我们在签名保存或下载时，图片边缘多出了很多透明的部分，这个裁剪功能就是把没有绘制到的地方去掉，只留签名的大小。

原理：ImageData() 构造函数使用给定的Uint8ClampedArray创建一个 ImageData 对象，并包含图像的大小，Uint8ClampedArray的length = 4 x width x height。如果不给定数组，会创建一个“完全透明”(因为透明度值为0)的黑色矩形图像。
ImageData.data属性描述了一个一维数组，包含以 RGBA 顺序的数据，数据使用 0 至 255（包含）的整数表示。