前端如何实现线上签名功能？-灵析社区

以下是我的一个demo，想问问还有没有大神有其他实现方案 在线签名 清除签名 保存签名 // 获取canvas元素 const canvas = document.getElementById('signatureCanvas'); const ctx = canvas.getContext('2d'); // 设置画笔属性 ctx.lineWidth = 2; ctx.strokeStyle = 'black'; // 初始化签名状态 let isDrawing = false; let lastX = 0; let lastY = 0; // 鼠标按下时开始签名 canvas.addEventListener('mousedown', (e) => { isDrawing = true; [lastX, lastY] = [e.offsetX, e.offsetY]; }); // 鼠标移动时绘制签名 canvas.addEventListener('mousemove', draw); // 鼠标抬起时停止签名 canvas.addEventListener('mouseup', () => isDrawing = false); canvas.addEventListener('mouseout', () => isDrawing = false); // 清除签名 const clearButton = document.getElementById('clearButton'); clearButton.addEventListener('click', () => { ctx.clearRect(0, 0, canvas.width, canvas.height); }); // 保存签名（生成签名图片） const saveButton = document.getElementById('saveButton'); saveButton.addEventListener('click', () => { const signatureImage = new Image(); signatureImage.src = canvas.toDataURL(); document.body.appendChild(signatureImage); }); // 绘制函数 function draw(e) { if (!isDrawing) return; ctx.beginPath(); ctx.moveTo(lastX, lastY); ctx.lineTo(e.offsetX, e.offsetY); ctx.stroke(); [lastX, lastY] = [e.offsetX, e.offsetY]; }