时间戳

首页 > 解决方案 > 重置 HTML5 画布以进行签名

javascript - 重置 HTML5 画布以进行签名

问题描述

我使用这个脚本： http ://www.lisenme.com/e-signature-pad-using-jquery-ajax-php-digital-signature-pad-submission-form/

我正在尝试制作用于重置画布的按钮，因此如果用户犯了错误，他可以重新设置并重新签名。

我四处搜索并尝试了几种不同的方法，但看起来这个脚本有一些自己的方式来重置画布。

问题是因为我对 JS 不太擅长，所以我做不到 :(

有人可以帮我举个例子，我如何制作重置按钮？

谢谢

标签： javascript

解决方案

您可以清除签名板的画布 -

<div id="signArea" >
  <h2 class="tag-ingo">Put signature below,</h2>
  <div class="sig sigWrapper" style="height:auto;">
    <div class="typed"></div>
    <canvas class="sign-pad" id="sign-pad" width="400" height="150"></canvas>
  </div>
</div>
<button id="clear">Clear</button>

现在添加 Clear Canvas 点击事件 -

// Create the Signaturepad
$(document).ready(function() {
  $('#signArea').signaturePad({drawOnly:true, drawBezierCurves:true, lineTop:0});
});

// Clear the Signaturepad
$('#clear').click(function() {
  $('#signArea').signaturePad().clearCanvas();
});

推荐阅读