之前接触了一个二手房交易软件，移动端使用H5开发，需求中尤一快就会客户通过手机可以直接签订租/售合同。

下面分享一下电子签名的几个步骤：

1、电子合同生成图片（demo）

2、寻找可是的签名插件（本文使用signature_pad.js）

    引入相关js

    <script charset="utf-8"src="js/jquery.min.js"></script>

    <script src="js/signature_pad.js"></script>

3、计算签名生成位置

    根据需要签名的位置计算签名生成的位置

4、js画图

创建canvas对象，将尺寸设置与电子档合同一样大，在新建的canvas里面重新绘制电子合同，在按照之前计算的签名位置，将生成的签名绘制在对应位置

注意事项：

签名图片没有加载完成时直接调用绘图会造成签名无法显示，所以需要对签名图片的onload方法里面在执行绘图操作