提交后清除画布[重复]

Question

我创建了一个小表单，用户可以在其中添加注释并在 Canvas 上签名。 提交后我在清除画布时遇到问题，无法使其正常工作。所有其他部分都可以正常工作。

这个想法是在提交时清除文本字段和画布。

现在我需要为 Stack-overflow 输入更多文本让我发布这个问题

<form method="post" enctype="multipart/form-data" id="notes">
  <div class="modal-body">
    <div class="row">
      <div class="col-md-12 col-sm-12">
        <div class="col-md-12 col-sm-12 ">
          <label class=" control-label">Notes: </label>
          <textarea name="notes" style="width:100%" rows="5"></textarea>
        </div>
      </div>
    </div>
    <input type="hidden" id="e_sign" name="e_sign">
    <div class="row">
      <div class="col-md-12">
        <h5> E-Signature (If required) </h5>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12" style="align:center;">
        <canvas
          style="box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2), 0 10px 20px 0 rgba(0, 0, 0, 0.19); border:2px"
          id="sig-canvas"
          width="550"
          height="250"
          style="background: white; align:center;">
        </canvas>
        <br>
        <div class="row">
          <div class="col-md-12"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <input type="submit" class="btn btn-primary" value="Save">
  </div>
</form>

与

$(document).ready(function(e) {

  $("#notes").on('submit', (function(e) {

    e.preventDefault();
    var canvas = document.getElementById("sig-canvas");

    image = canvas.toDataURL("image/png", 1);
    $("#e_sign").val(image);
    console.log(image);
    var url = "<?php echo base_url("medication / add_notes / ");?>"
    $.ajax({
      url: url,
      type: "POST",
      data: new FormData(this),
      contentType: false,
      cache: false,
      processData: false,
      success: function(data) {
        $('#note_count').val();
        $('#myModal78').modal('hide');

        swal("Done!", "Notes Successfully Added.", "success");
        $("#notes")[0].reset();
        $("#e_sign")[1].reset();
      },
    });
  }));
});

Answer 1

试试下面的sn-p，效果很好here：

var canvas = document.getElementById('canvas');
canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);