Question

im使用以下脚本： http://www.lisenme.com/e-signature-pad-using-jquery-ajax-php-digital-signature-pad-submission-form/

我会尝试设置用于重置画布的按钮，因此如果用户输入错误，则可以重置并再次签名。

我正在四处搜寻，尝试了几种不同的方法，但看起来此脚本具有一些重置画布的方法。

问题是因为我对JS不太满意，所以我无法做到：（

有人可以帮助我举例说明如何设置重置按钮吗？

谢谢

Answer 1

我对您正在运行的脚本不熟悉，但是如果您可以直接访问画布上下文，通常应该使用clearRect（）函数来清除画布。

const context = canvas.getContext（'2d'）;

context.clearRect（0，0，canvas.width，canvas.height）;

Answer 2

我上面提到的脚本作者在对某位用户的评论中说：

请使用下面的代码

“ var signaturePad1 = new SignaturePad（sign1_canvas）;   signaturePad1.clear（）;”

但是我不明白如何通过按钮使用此代码？

Answer 3

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

<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>

现在添加“清除画布”点击事件-

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

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

Answer 4

这是我的解决方法

var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
var ox = canvas.width / 2;
var oy = canvas.height / 2;
ctx.font = "42px serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#800";
ctx.fillRect(ox / 2, oy / 2, ox, oy);

var signaturePad = new SignaturePad(canvas, { backgroundColor: 'rgb(255, 255, 255)' });

$(document).ready(function () {

    $("#bfirmar").on("click", function () {
        console.log(canvas.toDataURL());
        $("#FirmaBase64").val(canvas.toDataURL());
    });

    $("#blimpiar").on("click", function () {
        signaturePad.clear();
    });
});

重置HTML5画布以进行签名

4 个答案: