HTML手写签名功能常用于电子合同、表单确认等场景，核心通过Canvas API实现，具体做法：创建Canvas元素，监听鼠标（mousedown、mousemove、mouseup）及触摸事件，获取坐标点并使用lineTo方法绘制连续路径；支持清除画布、调整笔触粗细/颜色；最后通过toDataURL方法将签名转为Base64图片格式，便于存储或提交，该方案兼容PC与移动端，无需依赖外部库，可快速集成至网页中。
HTML手写签名代码实现：从零打造个性化签名板
在数字化办公、在线表单签署、电子合同等场景中，手写签名功能已成为提升用户体验的关键环节，通过HTML结合Canvas技术，我们可以轻松实现一个支持鼠标/触摸绘制、清除、保存的个性化签名板，本文将从零开始，详细介绍手写签名代码的实现原理与具体步骤，帮助你快速掌握这一实用技能。
手写签名的核心需求与技术选型
核心需求
一个完整的手写签名功能通常需要满足：
- 绘制支持：支持鼠标（PC端）和触摸（移动端）绘制流畅线条；
- 交互功能：提供清除画布、撤销/重做（可选）、保存签名（如转为图片）；
- 样式自定义：可调整线条颜色、粗细等基础样式；
- 兼容性：适配主流浏览器及移动设备。
技术选型
- HTML：搭建签名板的基础结构（如
<canvas>元素）； - CSS：美化界面，适配响应式布局；
- JavaScript：处理绘制逻辑（鼠标/触摸事件）、交互功能（清除、保存）；
- Canvas API：核心绘图技术，提供
getContext('2d')上下文进行线条绘制。
HTML手写签名代码实现步骤
基础HTML结构
我们需要一个<canvas>元素作为签名板，并添加控制按钮（清除、保存），代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">HTML手写签名板</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="signature-container">
<h2>手写签名板</h2>
<canvas id="signatureCanvas" width="800" height="400"></canvas>
<div class="controls">
<button id="clearBtn">清除</button>
<button id="saveBtn">保存签名</button>
</div>
<div id="preview" class="preview"></div>
</div>
<script src="script.js"></script>
</body>
</html>
说明：
<canvas>的width和height属性是画布的实际像素尺寸，建议通过CSS设置其显示尺寸（如100%宽度），避免在高分辨率屏幕下模糊。controls区域包含清除和保存按钮，preview区域用于展示保存后的签名图片。
CSS样式设计
通过CSS让签名板更美观,并适配移动端：
/* style.css */
.signature-container {
max-width: 900px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
color: #333;
margin-bottom: 20px;
}
#signatureCanvas {
display: block;
width: 100%;
height: 400px;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #fff;
cursor: crosshair;
touch-action: none; /* 防止移动端触摸时页面滚动 */
}
.controls {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
#clearBtn {
background-color: #ff6b6b;
color: white;
}
#clearBtn:hover {
background-color: #ff5252;
}
#saveBtn {
background-color: #4ecdc4;
color: white;
}
#saveBtn:hover {
background-color: #26a69a;
}
.preview {
margin-top: 20px;
text-align: center;
}
.preview img {
max-width: 100%;
border: 1px solid #ddd;
border-radius: 4px;
}
关键点：
touch-action: none：禁用移动端触摸事件的默认行为（如滚动），确保绘制时不会触发页面滚动。cursor: crosshair：鼠标悬停时显示十字光标，提示绘制区域。
JavaScript核心逻辑
JavaScript是实现手写签名的关键,需处理绘制事件、清除功能和保存功能。
（1）获取Canvas上下文与初始化变量
// script.js
const canvas = document.getElementById('signatureCanvas');
const ctx = canvas.getContext('2d');
const clearBtn = document.getElementById('clearBtn');
const saveBtn = document.getElementById('saveBtn');
const preview = document.getElementById('preview');
// 绘制状态
let isDrawing = false;
let lastX = 0;
let lastY = 0;
// 线条样式
ctx.strokeStyle = '#000'; // 默认黑色
ctx.lineWidth = 2; // 默认线宽
ctx.lineCap = 'round'; // 线条末端为圆形
ctx.lineJoin = 'round'; // 线条连接处为圆形
（2）处理绘制事件（鼠标+触摸）
绘制逻辑的核心是监听鼠标/触摸的按下、移动、抬起事件，并在画布上绘制路径。
// 获取Canvas相对坐标
function getCoordinates(e) {
const rect = canvas.getBoundingClientRect();
const scaleX = canvas.width / rect.width; // 适配实际像素与显示尺寸
const scaleY = canvas.height / rect.height;
if (e.touches) {
// 触摸事件
return {
x: (e.touches[0].clientX - rect.left) * scaleX,
y: (e.touches[0].clientY - rect.top) * scaleY
};
} else {
// 鼠标事件
return {
x: (e.clientX - rect.left) * scaleX,
y: (e.clientY - rect.top) * scaleY
};
}
}
// 开始绘制
function startDrawing(e) {
isDrawing = true;
const coords = getCoordinates(e);
[lastX, lastY] = [coords.x, coords.y];
}
// 绘制中
function draw(e) {
if (!isDrawing) return;
e.preventDefault(); // 防止移动端滚动
const coords = getCoordinates(e);
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(coords.x, coords.y);
ctx.stroke();
[lastX, lastY] = [coords.x, coords.y];
}
// 结束绘制
function stopDrawing() {
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);
（3）清除功能
// 清除画布 clearBtn.addEventListener
标签： #手写代码
