首页html实现鼠标手写签名

html实现鼠标手写签名

时间: 2023-05-24 13:02:01 浏览: 474

HTML可以使用canvas元素来实现鼠标手写签名。您可以使用JavaScript监听鼠标事件，并在canvas上绘制用户的手写签名。实现该功能的具体代码可以参考下面的示例： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>手写签名</title> </head> <body> <canvas id="canvas" width="400" height="200" style="border:1px solid #ccc"></canvas> <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var painting = false; function startPosition(e) { painting = true; draw(e); } function finishedPosition() { painting = false; ctx.beginPath(); } function draw(e) { if (!painting) return; ctx.lineWidth = 2; ctx.lineCap = 'round'; ctx.strokeStyle = 'black'; ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop); ctx.stroke(); ctx.beginPath(); ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop); } canvas.addEventListener('mousedown', startPosition); canvas.addEventListener('mouseup', finishedPosition); canvas.addEventListener('mousemove', draw); </script> </body> </html> ```

阅读全文