利用html5以及canvas实现支持签名插件的方法

<script src="jquery/1.11.0/jquery.min.js"></script><script src="jq-signature.js"></script>

<!-- 创建一个签名区域，使用HTML5的data-option来传递一些参数 --><p class="js-signature"  data-width="600"  data-height="200"  data-border="1px solid #1ABC9C"  data-background="#16A085"  data-line-color="#fff"  data-auto-fit="true"></p> <!-- 创建两个操作按钮，分别用于清空画板和保存签名 --><button id="clearBtn" onclick="clearCanvas();">Clear Canvas</button><button id="saveBtn" onclick="saveSignature();" disabled>Save Signature</button> <!-- 可以使用一个空的<p>来显示保存的签名图片 --><p id="signature"></p>

//页面加载完毕之后使用下面的方法来初始化该签名插件$(document).on(&#39;ready&#39;, function() { $(&#39;.js-signature&#39;).jqSignature();}); function clearCanvas() { $(&#39;#signature&#39;).html(&#39;<p><em>Your signature will appear here when you click "Save Signature"</em></p>&#39;); $(&#39;.js-signature&#39;).jqSignature(&#39;clearCanvas&#39;); $(&#39;#saveBtn&#39;).attr(&#39;disabled&#39;, true);} function saveSignature() { $(&#39;#signature&#39;).empty(); var dataUrl = $(&#39;.js-signature&#39;).jqSignature(&#39;getDataURL&#39;); var img = $(&#39;<img  alt="利用html5以及canvas实现支持签名插件的方法" >&#39;).attr(&#39;src&#39;, dataUrl); $(&#39;#signature&#39;).append($(&#39;<p>&#39;).text("Here&#39;s your signature:")); $(&#39;#signature&#39;).append(img);} $(&#39;.js-signature&#39;).on(&#39;jq.signature.changed&#39;, function() { $(&#39;#saveBtn&#39;).attr(&#39;disabled&#39;, false);});