当前位置：首页 > JavaScript

js实现电子签名

2026-04-07 16:08:45JavaScript

实现电子签名的基本方法

使用JavaScript实现电子签名通常涉及HTML5的Canvas API，允许用户在网页上绘制签名并保存为图像。以下是核心实现步骤：

创建Canvas画布

在HTML中添加Canvas元素作为签名区域：

<canvas id="signatureCanvas" width="500" height="200"></canvas>
<button id="clearBtn">清除</button>
<button id="saveBtn">保存</button>

初始化绘图上下文

获取Canvas元素并设置绘图上下文：

const canvas = document.getElementById('signatureCanvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = '#000000';
ctx.lineWidth = 2;

实现绘图功能

添加鼠标/触摸事件监听实现手写效果：

let isDrawing = false;
let lastX = 0;
let lastY = 0;

canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);

// 触摸设备支持
canvas.addEventListener('touchstart', handleTouch);
canvas.addEventListener('touchmove', handleTouch);
canvas.addEventListener('touchend', stopDrawing);

function startDrawing(e) {
    isDrawing = true;
    [lastX, lastY] = [e.offsetX, e.offsetY];
}

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];
}

function handleTouch(e) {
    e.preventDefault();
    const touch = e.touches[0];
    const mouseEvent = {
        offsetX: touch.clientX - canvas.offsetLeft,
        offsetY: touch.clientY - canvas.offsetTop
    };
    if (e.type === 'touchstart') startDrawing(mouseEvent);
    else if (e.type === 'touchmove') draw(mouseEvent);
}

添加清除功能

实现清除画布的功能：

document.getElementById('clearBtn').addEventListener('click', () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
});

保存签名图像

将Canvas内容转换为图像数据：

document.getElementById('saveBtn').addEventListener('click', () => {
    const dataURL = canvas.toDataURL('image/png');
    const link = document.createElement('a');
    link.download = 'signature.png';
    link.href = dataURL;
    link.click();
});