HTML5 Canvas 实现在线签字功能(示例代码)

当前位置：电视猫 > Html5>

电视猫时间： 2024-07-31 19:18:04

HTML5 Canvas 实现在线签字功能示例代码

1. HTML 结构

HTML

<!DOCTYPE html>
<html>
<head>
    <title>在线签字</title>
</head>
<body>
    <canvas id="signature-pad" width="300" height="150"></canvas>
    <button onclick="clearSignature()">清除</button>
    <button onclick="saveSignature()">保存</button>
    <script src="script.js"></script>
</body>
</html>

2. JavaScript 代码 (script.js)

JavaScript

const canvas = document.getElementById('signature-pad');
const ctx = canvas.getContext('2d');

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

canvas.addEventListener('mousedown', (e) => {
    isDra   1. github.com 

github.comwing = true;
    [lastX, lastY] = [e.offsetX, e.offsetY];
});

canvas.addEventListener('mousemove', (e) => {
    if (!isDra   1. github.com 

github.comwing) return;
    drawLine(lastX, lastY, e.offsetX, e.offsetY);
    [lastX, lastY] = [e.offsetX, e.offsetY];
});

canvas.addEventListener('mou   1. github.com 

github.comseup', () => {
    isDrawing = false;
});

function drawLine(x1, y1, x2, y2) {
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.stroke();
}

function clearSignature() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function saveSignature() {
    const dataURL = canvas.toDataURL();
    // 将 dataURL 发送到服务器进行保存，例如使用 AJAX
    console.log(dataURL); // 在控制台输出 dataURL，用于演示
}

代码解释

HTML 结构:
- 创建一个 canvas 元素，用于绘制签名。
- 创建两个按钮，分别用于清除和保存签名。
JavaScript 代码:
- 获取 canvas 元素和 2D 绘图上下文。
- 使用事件监听器来跟踪鼠标的按下、移动和抬起事件。
- 在鼠标移动事件中调用 drawLine 函数绘制线条。
- clearSignature 函数用于清除画布。
- saveSignature 函数将 canvas 内容转换为 dataURL，可以将其发送到服务器进行保存。