你好我这里有一个签名板,它在小提琴上很完美,但当我把它全部包含在一起而不改变任何东西时,它根本就不会让我写上它。它会显示,并提供指针效果等但实际上不允许我写入它。
我将代码全部包含在一个页面上,我想将其包含在不同的页面中,或者我在做错了什么,它不会写在垫上?
希望你们能告诉我什么是错的,也许我做错了什么。
$(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>