要在JavaScript中实现手动签名的功能，可以使用HTML5的<canvas>元素。下面是一个简单的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>手动签名</title>
</head>
<body>
<h1>手动签名</h1>
<canvas id="signatureCanvas" width="500" height="200" style="border:1px solid #000000;"></canvas>
<br>
<button onclick="clearCanvas()">清除</button>
<button onclick="saveSignature()">保存</button>
<script>
var canvas = document.getElementById("signatureCanvas");
var context = canvas.getContext("2d");
var isDrawing = false;
var lastX = 0;
var lastY = 0;
canvas.addEventListener("mousedown", function (e) {
isDrawing = true;
lastX = e.offsetX;
lastY = e.offsetY;
});
canvas.addEventListener("mousemove", function (e) {
if (isDrawing) {
context.beginPath();
context.moveTo(lastX, lastY);
context.lineTo(e.offsetX, e.offsetY);
context.strokeStyle = "#000000";
context.lineWidth = 2;
context.stroke();
lastX = e.offsetX;
lastY = e.offsetY;
}
});
canvas.addEventListener("mouseup", function () {
isDrawing = false;
});
function clearCanvas() {
context.clearRect(0, 0, canvas.width, canvas.height);
}
function saveSignature() {
var imageURL = canvas.toDataURL(); // 转换为base64编码的图像URL
// 在此处可以将imageURL发送到服务器保存，或者进行其他处理
console.log(imageURL);
}
</script>
</body>
</html>
这段代码创建了一个<canvas>元素，当鼠标在画布上按下、移动和释放时，会在画布上绘制路径并保存鼠标的坐标。清除按钮会清除画布上的内容，保存按钮会将画布内容转为base64编码的图像URL并将其打印到控制台。
你可以根据需要对saveSignature()函数进行修改，以便将签名图像发送到服务器保存或进行其他处理。
image.png
网友评论