我试图在表单中包含一个画布元素，用户可以在其中绘制签名。边框和框已经创建，但当我尝试在上面绘制时，什么也没发生。当我把定义canvas标记的代码放在form标记之外时，笔划似乎创建得很好。以下是我的代码，如有任何帮助，将不胜感激。
<!DOCTYPE html>
<html>
<body>
<form>
<label for="idate" style="display:block">Issue Date:</label>
<input type="text" id="idate" name="idate"> </span>
<input name="name" placeholder="Your name" required />
<canvas id="signature" width="300" height="100"></canvas>
<script>
var canvas = document.getElementById("signature");
var ctx = canvas.getContext("2d");
var drawing = false;
var prevX, prevY;
var currX, currY;
var signature = document.getElementsByName('signature')[0];
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mouseup", stop);
canvas.addEventListener("mousedown", start);
function start() {
drawing = true;
}
function stop() {
drawing = false;
prevX = prevY = null;
signature.value = canvas.toDataURL();
}
function draw(e) {
if (!drawing) {
return;
}
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
if (!prevX && !prevY) {
prevX = currX;
prevY = currY;
}
ctx.beginPath();
ctx.moveTo(prevX, prevY);
ctx.lineTo(currX, currY);
ctx.strokeStyle = 'black';
ctx.lineWidth = 2;
ctx.stroke();
ctx.closePath();
prevX = currX;
prevY = currY;
}
function onSubmit(e) {
console.log({
'name': document.getElementsByName('name')[0].value,
'signature': signature.value,
});
return false;
}
</script>
<input type="hidden" name="signature" />
<button type="submit">Send</button>
</form>
</body>
</html>
此处var canvas = document.getElementById("signature');中存在语法错误
它应该像这个var canvas = document.getElementById("signature");
您用"打开字符串，用'关闭它。为了避免这种错误，请考虑使用好的代码编辑器。例如，Visual Studio代码。
您的固定代码：
<!DOCTYPE html>
<html>
<body>
<form>
<label for="idate" style="display:block">Issue Date:</label>
<input type="text" id="idate" name="idate"> </span>
<input name="name" placeholder="Your name" required />
<canvas id="signature" width="300" height="100"></canvas>
<script>
var canvas = document.getElementById("signature"); // here was the syntax error
var ctx = canvas.getContext("2d");
var drawing = false;
var prevX, prevY;
var currX, currY;
var signature = document.getElementsByName('signature')[0];
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mouseup", stop);
canvas.addEventListener("mousedown", start);
function start() {
drawing = true;
}
function stop() {
drawing = false;
prevX = prevY = null;
signature.value = canvas.toDataURL();
}
function draw(e) {
if (!drawing) {
return;
}
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
if (!prevX && !prevY) {
prevX = currX;
prevY = currY;
}
ctx.beginPath();
ctx.moveTo(prevX, prevY);
ctx.lineTo(currX, currY);
ctx.strokeStyle = 'black';
ctx.lineWidth = 2;
ctx.stroke();
ctx.closePath();
prevX = currX;
prevY = currY;
}
function onSubmit(e) {
console.log({
'name': document.getElementsByName('name')[0].value,
'signature': signature.value,
});
return false;
}
</script>
<input type="hidden" name="signature" />
<button type="submit">Send</button>
</form>
</body>
</html>我也不知道为什么，但您尝试为HTML元素分配一个dataURI。考虑这个
var signature; // no need to select canvas element, just save dataURI in this variable
function stop() {
drawing = false;
prevX = prevY = null;
signature = canvas.toDataURL();
}
function onSubmit(e) {
console.log({
'name': document.getElementsByName('name')[0].value,
'signature': signature,
});
return false;
}