扩展现有画布签名脚本

Question

我缺乏javascript / Jquery技能来扩展脚本，就像我想要的那样。我想使用此脚本在页面上有3个符号字段。所有3个将单独签名，稍后应保存为3个图像，以通过FPDF创建PDF。我的问题是3x＆＃34;＆＃34;并没有提供希望的结果。这就是我想问的问题。如果某人能够向我解释如何做到这一点。

问候。

＆＃13;

＆＃13;

var isSign = false;
var leftMButtonDown = false;

jQuery(function() {
  //Initialize sign pad
  init_Sign_Canvas();
});

function fun_submit() {
  if (isSign) {
    var canvas = $("#canvas").get(0);
    var imgData = canvas.toDataURL();
    jQuery('#page').find('p').remove();
    jQuery('#page').find('img').remove();
    jQuery('#page').append(jQuery('<p>Your Sign:</p>'));
    jQuery('#page').append($('<img/>').attr('src', imgData));

    closePopUp();
  } else {
    alert('Please sign');
  }
}

function closePopUp() {
  jQuery('#divPopUpSignContract').popup('close');
  jQuery('#divPopUpSignContract').popup('close');
}

function init_Sign_Canvas() {
  isSign = false;
  leftMButtonDown = false;

  //Set Canvas width
  var sizedWindowWidth = $(window).width();
  if (sizedWindowWidth > 700)
    sizedWindowWidth = $(window).width() / 2;
  else if (sizedWindowWidth > 350)
    sizedWindowWidth = sizedWindowWidth - 100;
  else
    sizedWindowWidth = sizedWindowWidth - 50;

  $("#canvas").width(350);
  $("#canvas").height(100);
  $("#canvas").css("border", "1px solid #000");

  var canvas = $("#canvas").get(0);

  canvasContext = canvas.getContext('2d');

  if (canvasContext) {
    canvasContext.canvas.width = 350;
    canvasContext.canvas.height = 100;

    canvasContext.fillStyle = "#fff";
    canvasContext.fillRect(0, 0, sizedWindowWidth, 350);

    canvasContext.moveTo(100, 150);
    canvasContext.lineTo(sizedWindowWidth - 50, 150);
    canvasContext.stroke();

    canvasContext.fillStyle = "#000";
    canvasContext.font = "20px Arial";
    canvasContext.fillText("x", 40, 155);
  }
  // Bind Mouse events
  $(canvas).on('mousedown', function(e) {
    if (e.which === 1) {
      leftMButtonDown = true;
      canvasContext.fillStyle = "#000";
      var x = e.pageX - $(e.target).offset().left;
      var y = e.pageY - $(e.target).offset().top;
      canvasContext.moveTo(x, y);
    }
    e.preventDefault();
    return false;
  });

  $(canvas).on('mouseup', function(e) {
    if (leftMButtonDown && e.which === 1) {
      leftMButtonDown = false;
      isSign = true;
    }
    e.preventDefault();
    return false;
  });

  // draw a line from the last point to this one
  $(canvas).on('mousemove', function(e) {
    if (leftMButtonDown == true) {
      canvasContext.fillStyle = "#000";
      var x = e.pageX - $(e.target).offset().left;
      var y = e.pageY - $(e.target).offset().top;
      canvasContext.lineTo(x, y);
      canvasContext.stroke();
    }
    e.preventDefault();
    return false;
  });

  //bind touch events
  $(canvas).on('touchstart', function(e) {
    leftMButtonDown = true;
    canvasContext.fillStyle = "#000";
    var t = e.originalEvent.touches[0];
    var x = t.pageX - $(e.target).offset().left;
    var y = t.pageY - $(e.target).offset().top;
    canvasContext.moveTo(x, y);

    e.preventDefault();
    return false;
  });

  $(canvas).on('touchmove', function(e) {
    canvasContext.fillStyle = "#000";
    var t = e.originalEvent.touches[0];
    var x = t.pageX - $(e.target).offset().left;
    var y = t.pageY - $(e.target).offset().top;
    canvasContext.lineTo(x, y);
    canvasContext.stroke();

    e.preventDefault();
    return false;
  });

  $(canvas).on('touchend', function(e) {
    if (leftMButtonDown) {
      leftMButtonDown = false;
      isSign = true;
    }

  });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<canvas id="canvas">Canvas is not supported</canvas>
<canvas id="canvas">Canvas is not supported</canvas>
<canvas id="canvas">Canvas is not supported</canvas>

＆＃13;

＆＃13;

＆＃13;