javascript - 模态弹出窗口内的 Canvas 签名板效果不佳

Question

我正在尝试用 Canvas 创建一个简单的签名板，但结果不是我想要的，到目前为止我无法找到解决方案。 我想要一条更好的线路径，因为当我走得快时，它变成了一条由分离点组成的线，而不是一条连续的线，如下图所示!

任何改进我的代码的想法都可能非常有帮助，在此先感谢!

var size = 5;
var paint = false;
var color = '#873f3f';

var canvas = document.getElementById("canvas");
var cxt = canvas.getContext("2d");

function startToPaint(event) {

  var x = event.clientX - 520;
  var y = event.clientY - 340;


  if (paint) {
    cxt.fillRect(x, y, size, size);

  }

}

function activate() {
  paint = true;

}

function deactivate() {
  paint = false;
}

function effacer() {
  const context = canvas.getContext("2d");
  context.clearRect(0, 0, canvas.width, canvas.height);
}




//POPUP 
var $popup, $popupBtn, $closeBtn, $popupContent;

$popup = $('#popUp');

$popupBtn = $('#reserver');

$closeBtn = $('#closeBtn');

$popupContent = $('.popupContent');


$popupBtn.on('click', openPopup);

$closeBtn.on('click', closePopup);

$(window).on('click', outsideClick);


function openPopup() {
  $popup.fadeIn(1000);
  $popup.css("display", "block");
}


function closePopup() {
  alert("Etes vous sur de vouloir quitter la page? Les données saisies ne seront pas enregistrées");
  $popup.css("display", "none");
  effacer();
}

function outsideClick(e) {
  if (e.target.id == 'popUp') {
    alert("Etes vous sur de vouloir quitter la page? Les données saisies ne seront pas enregistrées");
    $popup.css("display", "none");
    effacer();
  }
}

#canvas {
  border: 1px solid #008ddd;
  display: inline;
}

#popUp {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.popup-content {
  width: 40%;
  height: 65%;
  top: 25%;
  margin: 0 auto;
  position: relative;
  text-align: center;
  background-color: #f4f4f4;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
  animation-name: modalopen;
  animation-duration: 1s;
}

.popup-header {
  background: #008ddd;
  padding: 15px;
  color: #fff;
}

.popup-body {
  padding: 10px 20px;
}

#closeBtn {
  color: #ccc;
  float: right;
  font-size: 30px;
  color: #fff;
}

#closeBtn:hover,
#closeBtn:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="popUp">
  <div class="popup-content">
    <div class="popup-header">
      <span id="closeBtn">&times;</span>
      <h2 class="titrePopup">Veuillez confirmer la réservation avec votre signature</h2>
    </div>
    <div class="popup-body">

      <canvas id="canvas" width="500" height="250" onmousemove="startToPaint(event)" onmousedown="activate();" onmouseup="deactivate();">
                        <p>Désolé, votre navigateur ne supporte pas Canvas. Mettez-vous à jour</p>
                    </canvas>
      <div class="confirmSign">
        <button id="effacer" onclick="effacer();">Effacer</button>
        <button id="save">Confimer</button>
      </div>
    </div>

  </div>
</div>

Answer 1

您可能可以使用直线连接连续的点，甚至可以试验贝塞尔曲线，以获得更好的结果。