要在JavaScript中實現(xiàn)手動簽名的功能胖秒，可以使用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發(fā)送到服務器保存慕的，或者進行其他處理
console.log(imageURL);
}
</script>
</body>
</html>
這段代碼創(chuàng)建了一個<canvas>元素阎肝，當鼠標在畫布上按下、移動和釋放時肮街，會在畫布上繪制路徑并保存鼠標的坐標风题。清除按鈕會清除畫布上的內容，保存按鈕會將畫布內容轉為base64編碼的圖像URL并將其打印到控制臺低散。
你可以根據(jù)需要對saveSignature()函數(shù)進行修改俯邓，以便將簽名圖像發(fā)送到服務器保存或進行其他處理。
image.png
