当前位置：首页 > HTML

h5实现签字

2026-01-16 17:04:13HTML

H5实现签字功能的方法

使用Canvas API

Canvas API是HTML5提供的绘图功能，可用于实现签字板。创建一个Canvas元素，监听触摸或鼠标事件，记录移动轨迹并绘制线条。

<canvas id="signatureCanvas" width="400" height="200"></canvas>
<button id="clearButton">清除</button>
<button id="saveButton">保存</button>

const canvas = document.getElementById('signatureCanvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;

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

canvas.addEventListener('touchstart', startDrawing);
canvas.addEventListener('touchmove', draw);
canvas.addEventListener('touchend', stopDrawing);

function startDrawing(e) {
    isDrawing = true;
    draw(e);
}

function draw(e) {
    if (!isDrawing) return;
    const rect = canvas.getBoundingClientRect();
    const x = (e.clientX || e.touches[0].clientX) - rect.left;
    const y = (e.clientY || e.touches[0].clientY) - rect.top;

    ctx.lineWidth = 2;
    ctx.lineCap = 'round';
    ctx.lineTo(x, y);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(x, y);
}

function stopDrawing() {
    isDrawing = false;
    ctx.beginPath();
}

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

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

使用第三方库

第三方库如Signature Pad可以简化实现过程。引入库后，只需几行代码即可实现签字功能。

<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>
<canvas id="signaturePad" width="400" height="200"></canvas>
<button id="clearBtn">清除</button>
<button id="saveBtn">保存</button>

const canvas = document.getElementById('signaturePad');
const signaturePad = new SignaturePad(canvas);

document.getElementById('clearBtn').addEventListener('click', () => {
    signaturePad.clear();
});

document.getElementById('saveBtn').addEventListener('click', () => {
    if (signaturePad.isEmpty()) {
        alert('请先签名');
        return;
    }
    const dataURL = signaturePad.toDataURL('image/png');
    const link = document.createElement('a');
    link.href = dataURL;
    link.download = 'signature.png';
    link.click();
});

移动端适配

移动端需处理触摸事件，确保Canvas元素在触摸屏上响应流畅。CSS样式应禁用默认行为，防止页面滚动干扰签字。

canvas {
    touch-action: none;
    border: 1px solid #000;
}

数据保存与传输

签字完成后，Canvas内容可转换为Base64格式的图片数据，便于上传至服务器或本地存储。

h5实现签字

function saveSignature() {
    const dataURL = canvas.toDataURL('image/png');
    localStorage.setItem('signature', dataURL);
}

function loadSignature() {
    const dataURL = localStorage.getItem('signature');
    if (dataURL) {
        const img = new Image();
        img.src = dataURL;
        img.onload = () => {
            ctx.drawImage(img, 0, 0);
        };
    }
}

以上方法均适用于H5环境，可根据需求选择原生Canvas实现或第三方库方案。

分享给朋友：