模式彈出框內的畫布簽名板無法正常工作

Question

我正在嘗試用畫布創建一個簡單的簽名板，但結果不是我想要的，到目前為止我還沒有找到解決方案。 我想獲得一個更好的線路徑，因為當我快速移動時，它會變成由分離點組成的線，而不是您在下面看到的連續線！

任何改善我的代碼的想法都將非常有幫助，在此先感謝您！

 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

您可以使用直線鏈接連續的點，甚至可以嘗試使用貝塞爾曲線來獲得更好的結果。