0

你好所以我在这里有一个签名板，它在小提琴上非常完美，但是当我自己把它全部放在一起而不改变任何东西时，它根本不会让我在上面写字。它会显示并提供指针效果等，但实际上不允许我在其中写入。

我将代码全部包含在一页中，我想将其包含在不同的页面中，还是我做错了什么，它不会写在垫子上？

希望你们能告诉我什么是错的，也许我做错了什么。

$(function() {
  var canvas = document.getElementById('thecanvas');
  var signaturePad = new SignaturePad(canvas);
  drawSignatureLine();
  $('button.save').click(function() {
    window.open(signaturePad.toDataURL("image/png"));
  });
  $('button.clear').click(function() {
    signaturePad.clear();
    drawSignatureLine();
  });

  function drawSignatureLine() {
    var context = canvas.getContext('2d');
    context.lineWidth = .5;
    context.strokeStyle = '#333';
    context.beginPath();
    context.moveTo(0, 150);
    context.lineTo(500, 150);
    context.stroke();
  }
});
body {
  margin-left: 0px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
}

body {
  font-family: arial;
  background-color: #656565;
  text-align: center;
  margin: auto;
}

canvas#thecanvas {
  border: dashed 1px #333;
  cursor: pointer;
  background-color: rgba(255, 255, 255, .85);
  width: 475px;
  height: 225px;
}

div.buttons {
  text-align: center;
  width: 477px;
  background-color: rgba(255, 255, 255, .85);
  position: relative;
  top: -3px;
  margin: auto;
}

div.buttons button {
  padding: 15px;
  margin: 5px;
  cursor: pointer;
}

label {
  margin-top: 25px;
  width: 467px;
  padding: 5px;
  text-align: left;
  display: inline-block;
  background-color: rgba(255, 255, 255, .85);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.3.6/signature_pad.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Sign On the Line Below:</label><br/>
<canvas id="thecanvas" width="475px" height="225px"></canvas>
<div class="buttons">
  <button class="save">Save</button>
  <button class="clear">Clear</button>
</div>

我如何在线获得它：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.3.6/signature_pad.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="application/javascript">
$(function(){ 
    var canvas = document.getElementById('thecanvas');
    var signaturePad = new SignaturePad(canvas);    
    drawSignatureLine();
    $('button.save').click(function(){               
        window.open(signaturePad.toDataURL("image/png"));
    });
    $('button.clear').click(function(){
        signaturePad.clear();        
        drawSignatureLine();
    });
    function drawSignatureLine(){        
          var context = canvas.getContext('2d');          
          context.lineWidth = .5;
          context.strokeStyle = '#333';
          context.beginPath();
          context.moveTo(0, 150);
          context.lineTo(500, 150);
          context.stroke();
    }  
});
</script>



<style type="text/css">
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
body{font-family: arial; background-color: #656565; text-align: center; margin: auto;}
canvas#thecanvas{border: dashed 1px #333; cursor:pointer; background-color: rgba(255,255,255,.85); width: 475px; height: 225px;}
div.buttons{text-align: center; width: 477px; background-color: rgba(255,255,255,.85); position: relative; top: -3px; margin: auto;}
div.buttons button{padding: 15px; margin: 5px; cursor: pointer;}
label{margin-top: 25px;width: 467px; padding: 5px; text-align: left; display: inline-block; background-color: rgba(255,255,255,.85);}
</style>
</head>

<body>

<label>Sign On the Line Below:</label><br/>
<canvas id="thecanvas" width="475px" height="225px"></canvas>
<div class="buttons">
  <button class="save">Save</button>
  <button class="clear">Clear</button>
</div>
</body>
</html>
4

0 回答 0