JavaScript zur Implementierung der mobilen Signaturfunktion

<div Klasse="mui-content-padded">
 <div class="mui-inline"><font style="font-family: '微软雅黑';font-size: 1.2rem;">Signatur des Akzeptanten:</font></div>
</div>
<div Klasse = "mui-content-canvasDiv" Stil = "Überlauf: ausgeblendet;">
 <canvas id="myCanvas" width="660" height="360" style="border:1px solid #f2f2f2;"></canvas>
 <div Klasse="saveimgs" id="saveImgDiv"></div>
</div>

InitThis();

var mousePressed = false;
var letztesX, letztesY;
var ctx = document.getElementById('myCanvas').getContext("2d");
var c = document.getElementById("myCanvas");
var ausgewählt1, ausgewählt2;
Funktion InitThis() {
 // Touchscreen c.addEventListener('touchstart', function(event) {
  console.log(1)
  wenn (event.targetTouches.length == 1) {
   event.preventDefault(); // Standardereignisse des Browsers verhindern, wichtig mousePressed = true;
   Zeichnen(event.touches[0].pageX - this.offsetLeft, event.touches[0].pageY - this.offsetTop, false);
  }
 }, FALSCH);
 c.addEventListener('touchmove', Funktion(Ereignis) {
  console.log(2)
  wenn (event.targetTouches.length == 1) {
   event.preventDefault(); // Browser-Standardereignisse verhindern, wichtig if(mousePressed) { 
    Zeichnen(event.touches[0].pageX - this.offsetLeft, event.touches[0].pageY - this.offsetTop, true);
 
   }
  }
 }, FALSCH);
 c.addEventListener('touchend', Funktion(Ereignis) {
  console.log(3)
  wenn (event.targetTouches.length == 1) {
   event.preventDefault(); // Verhindere Standardereignisse des Browsers, um das Ziehen des Bildschirms während der Handschrift zu verhindern, wichtig mousePressed = false;
  }
 }, FALSCH);
 // Maus c.onmousedown = Funktion(Ereignis) {
  Maus gedrückt = wahr;
  Zeichnen(event.pageX - dieser.offsetLinks, event.pageY - dieser.offsetOben, false);
 };
 c.onmousemove = Funktion(Ereignis) {
  if(Maus gedrückt) {
   Zeichnen(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, true);
  }
 };
 c.onmouseup = Funktion(Ereignis) {
  Maus gedrückt = falsch;
 };
}
 
Funktion Zeichnen(x, y, isDown) {
 wenn(istUnten) {
  ctx.beginPath();
  ctx.strokeStyle = ausgewählt2;
  ctx.lineWidth = ausgewählt1;
  ctx.lineJoin = "runde";
  ctx.moveTo(letztesX, letztesY);
  ctx.lineTo(x, y);
  ctx.closePath();
  ctx.stroke();
 }
 letztesX = x;
 letztesY = y;
}

var Datei = "http://10.1.31.173:8097/upload/" + iv[0].zjqm + "?v=" + neues Date().getTime();
 
$("#saveImgDiv").append('<img src="'+ Datei + '" style="background:white" width="660" height="360">');

var saveimgs = document.getElementsByClassName("saveimgs")[0];
 
//Signaturbild speichern var image = c.toDataURL("image/png");
var ctximg = document.createElement("span");
ctximg.innerHTML = "<img src='" + Bild + "' alt='von Canvas'/>";
wenn (saveimgs.getElementsByTagName('span').length >= 1) {
 var span_old = saveimgs.getElementsByTagName("span")[0];
 saveimgs.replaceChild(ctximg,span_old)
} anders {
 saveimgs.appendChild(ctximg);
}